feat(i18n): 添加交易相关的本地化支持，包括订单确认、撤单和交易方式等翻译

src/locales/zh-CN.json

@@ -149,6 +149,60 @@
   },
   "trade": {
     "title": "交易",
+    "spot": "现货",
+    "buy": "买入",
+    "sell": "卖出",
+    "signIn": "请先登录",
+    "form": {
+      "price": "价格",
+      "quantity": "数量",
+      "amount": "金额",
+      "enterPrice": "请输入价格",
+      "enterQuantity": "请输入交易数量",
+      "enterAmount": "请输入交易金额"
+    },
+    "orderType": {
+      "baseOrder": "基础委托",
+      "limit": "限价委托",
+      "limitDesc": "以指定价格买入或卖出",
+      "market": "市价委托",
+      "marketDesc": "以市场价格买入或卖出",
+      "moreTypes": "更多委托类型，敬请期待"
+    },
+    "confirm": {
+      "title": "下单确认",
+      "orderPrice": "委托价格",
+      "quantity": "数量",
+      "amount": "金额",
+      "type": "类型",
+      "confirm": "确认下单",
+      "success": "订单提交成功"
+    },
+    "orders": {
+      "current": "当前委托",
+      "history": "历史记录",
+      "cancel": "撤单",
+      "cancelConfirm": "取消订单",
+      "cancelMessage": "确定要取消该订单吗？",
+      "cancelSuccess": "订单已取消",
+      "filled": "成交",
+      "total": "总额"
+    },
+    "status": {
+      "pending": "待处理",
+      "open": "已挂单",
+      "partialFilled": "部分成交",
+      "filled": "已完成",
+      "cancelled": "已取消",
+      "rejected": "已拒绝"
+    },
+    "validation": {
+      "quantityRequired": "请输入有效的数量",
+      "quantityMin": "数量必须大于0",
+      "priceRequired": "请输入有效的价格",
+      "priceMin": "价格必须大于0",
+      "orderTypeRequired": "请选择有效的交易方式"
+    },
     "settings": {
       "bankManagement": "银行卡管理",
       "mySubscribe": "我的申购",
@@ -443,7 +497,9 @@
     "files": "个文件",
     "today": "今天",
     "yesterday": "昨天",
-    "items": "项"
+    "items": "项",
+    "confirm": "确定",
+    "cancel": "取消"
   },
   "fileUpload": {
     "uploadFile": "上传文件",

src/views/trade/components/confirm-order.vue

@@ -9,6 +9,7 @@ import { tradeWayConfig } from "../config";
 const props = defineProps<{
   form: SpotOrderBody & { amount: string };
 }>();
+const { t } = useI18n();
 const currentTradeWay = computed(() => {
   return tradeWayConfig.find(item => item.value === props.form.orderType);
 });
@@ -27,7 +28,7 @@ async function onConfirm() {
   }));
   tradeEvent.trigger();
   const toast = await toastController.create({
-    message: "订单提交成功",
+    message: t("trade.confirm.success"),
     duration: 2000,
     position: "top",
     color: "success",
@@ -41,7 +42,7 @@ async function onConfirm() {
   <div class="ion-padding h-80">
     <div class="flex justify-between items-center mb-5">
       <div class="font-semibold">
-        下单确认
+        {{ t('trade.confirm.title') }}
       </div>
       <ion-icon :icon="closeOutline" class="text-2xl" @click="onClose" />
     </div>
@@ -51,13 +52,13 @@ async function onConfirm() {
           {{ form.symbol }}
         </div>
         <ui-tag size="mini" :type="form.side === 'buy' ? 'success' : 'danger'">
-          {{ form.side === 'buy' ? '买入' : '卖出' }}
+          {{ form.side === 'buy' ? t('trade.buy') : t('trade.sell') }}
         </ui-tag>
       </div>
       <template v-if="form.orderType === 'limit'">
         <div class="cell">
           <div class="label">
-            委托价格
+            {{ t('trade.confirm.orderPrice') }}
           </div>
           <div class="value">
             {{ form.price }} USDT
@@ -65,7 +66,7 @@ async function onConfirm() {
         </div>
         <div class="cell">
           <div class="label">
-            数量
+            {{ t('trade.confirm.quantity') }}
           </div>
           <div class="value">
             {{ form.quantity }}
@@ -73,7 +74,7 @@ async function onConfirm() {
         </div>
         <div class="cell">
           <div class="label">
-            金额
+            {{ t('trade.confirm.amount') }}
           </div>
           <div class="value">
             {{ form.amount }} USDT
@@ -81,10 +82,10 @@ async function onConfirm() {
         </div>
         <div class="cell">
           <div class="label">
-            类型
+            {{ t('trade.confirm.type') }}
           </div>
           <div class="value">
-            {{ currentTradeWay?.name }}
+            {{ t(`trade.orderType.${currentTradeWay?.value}`) }}
           </div>
         </div>
       </template>
@@ -92,7 +93,7 @@ async function onConfirm() {
       <template v-else-if="form.orderType === 'market'">
         <div class="cell">
           <div class="label">
-            委托价格
+            {{ t('trade.confirm.orderPrice') }}
           </div>
           <div class="value">
             {{ form.price }} USDT
@@ -100,7 +101,7 @@ async function onConfirm() {
         </div>
         <div class="cell">
           <div class="label">
-            数量
+            {{ t('trade.confirm.quantity') }}
           </div>
           <div class="value">
             {{ form.quantity }}
@@ -111,7 +112,7 @@ async function onConfirm() {
 
     <div class="mt-6">
       <ion-button expand="block" color="success" @click="onConfirm">
-        确认下单
+        {{ t('trade.confirm.confirm') }}
       </ion-button>
     </div>
   </div>

src/views/trade/components/order-card.vue

@@ -8,6 +8,7 @@ type Item = Treaty.Data<typeof client.api.spot_order.list.get>["data"][number];
 
 const props = defineProps<{ item: Item; showCancel?: boolean }>();
 const emit = defineEmits<{ refresh: [] }>();
+const { t } = useI18n();
 
 const currentTradeWay = computed(() => {
   return tradeWayConfig.find(item => item.value === props.item.orderType);
@@ -15,15 +16,15 @@ const currentTradeWay = computed(() => {
 
 async function cancelOrder(orderId: string) {
   const alert = await alertController.create({
-    header: "取消订单",
+    header: t("trade.orders.cancelConfirm"),
-    message: "确定要取消该订单吗？",
+    message: t("trade.orders.cancelMessage"),
     buttons: [
       {
-        text: "取消",
+        text: t("trade.orders.cancel"),
         role: "cancel",
       },
       {
-        text: "确定",
+        text: t("common.confirm"),
         role: "destructive",
         handler: async () => {
           await safeClient(client.api.spot_order.cancel.post({ orderId }));
@@ -31,7 +32,7 @@ async function cancelOrder(orderId: string) {
           await alert.dismiss();
           const toast = await toastController
             .create({
-              message: "订单已取消",
+              message: t("trade.orders.cancelSuccess"),
               duration: 2000,
               position: "bottom",
               color: "success",
@@ -55,11 +56,11 @@ async function cancelOrder(orderId: string) {
           ? 'bg-success/10 text-(--ion-color-success)'
           : 'bg-danger/10 text-(--ion-color-danger)'"
       >
-        {{ item.side === 'buy' ? '买入' : '卖出' }}
+        {{ item.side === 'buy' ? t('trade.buy') : t('trade.sell') }}
       </span>
       <span class="text-sm font-medium">{{ item.symbol }}</span>
       <ion-badge :color="orderStatusMap[item.status].color" class="text-[10px] px-1.5 py-0.5">
-        {{ orderStatusMap[item.status].text }}
+        {{ t(`trade.status.${item.status === 'partial_filled' ? 'partialFilled' : item.status}`) }}
       </ion-badge>
     </div>
     <button
@@ -67,25 +68,25 @@ async function cancelOrder(orderId: string) {
       class="px-3 py-1 bg-transparent border border-(--ion-color-danger) text-(--ion-color-danger) rounded-md text-xs transition-all active:bg-(--ion-color-danger) active:text-white"
       @click="cancelOrder(item.id)"
     >
-      撤单
+      {{ t('trade.orders.cancel') }}
     </button>
   </div>
 
   <div class="grid grid-cols-2 gap-2 mb-2">
     <div class="flex justify-between text-xs">
-      <span class="text-(--ion-text-color-step-400)">{{ currentTradeWay?.name }}</span>
+      <span class="text-(--ion-text-color-step-400)">{{ t(`trade.orderType.${currentTradeWay?.value}`) }}</span>
       <span class="text-(--ion-text-color) font-medium">{{ item.orderType === 'limit' ? Number(item.price).toString() : '-' }}</span>
     </div>
     <div class="flex justify-between text-xs">
-      <span class="text-(--ion-text-color-step-400)">数量</span>
+      <span class="text-(--ion-text-color-step-400)">{{ t('trade.confirm.quantity') }}</span>
       <span class="text-(--ion-text-color) font-medium">{{ Number(item.quantity).toString() }}</span>
     </div>
     <div class="flex justify-between text-xs">
-      <span class="text-(--ion-text-color-step-400)">成交</span>
+      <span class="text-(--ion-text-color-step-400)">{{ t('trade.orders.filled') }}</span>
       <span class="text-(--ion-text-color) font-medium">{{ Number(item.price).toString() }}</span>
     </div>
     <div class="flex justify-between text-xs">
-      <span class="text-(--ion-text-color-step-400)">总额</span>
+      <span class="text-(--ion-text-color-step-400)">{{ t('trade.orders.total') }}</span>
       <span class="text-(--ion-text-color) font-medium">{{ Number(item.totalAmount).toString() }} USDT</span>
     </div>
   </div>

src/views/trade/components/orders-panel.vue

@@ -4,17 +4,17 @@ import OrderList from "./order-list.vue";
 type TabType = "current" | "history";
 
 const props = defineProps<{ symbol: string }>();
-
+const { t } = useI18n();
 const activeTab = ref<TabType>("current");
 </script>
 
 <template>
   <div class="flex flex-col h-full bg-(--ion-background-color)">
     <ui-tabs v-model="activeTab" size="small">
-      <ui-tab-pane title="当前委托" name="current">
+      <ui-tab-pane :title="t('trade.orders.current')" name="current">
         <OrderList show-cancel :symbol="props.symbol" :status="['open', 'partial_filled', 'pending', 'rejected']" />
       </ui-tab-pane>
-      <ui-tab-pane title="历史记录" name="history">
+      <ui-tab-pane :title="t('trade.orders.history')" name="history">
         <OrderList :symbol="props.symbol" :status="['filled', 'cancelled']" />
       </ui-tab-pane>
     </ui-tabs>

src/views/trade/components/trade-switch.vue

@@ -4,15 +4,16 @@ import type { PropType } from "vue";
 type Active = "buy" | "sell";
 
 const active = defineModel<Active>("active", { type: String as PropType<Active>, default: "buy" });
+const { t } = useI18n();
 </script>
 
 <template>
   <div class="container">
     <div class="btn" :class="[active === 'buy' && 'buy']" @click="active = 'buy'">
-      买入
+      {{ t('trade.buy') }}
     </div>
     <div class="btn" :class="[active === 'sell' && 'sell']" @click="active = 'sell'">
-      卖出
+      {{ t('trade.sell') }}
     </div>
   </div>
 </template>

src/views/trade/components/trade-way.vue

@@ -7,6 +7,7 @@ import { caretDownOutline } from "ionicons/icons";
 import { tradeWayConfig } from "../config";
 
 const model = defineModel({ type: Object as PropType<SpotOrderBody>, required: true });
+const { t } = useI18n();
 const currentTradeWay = computed(() => {
   return tradeWayConfig.find(item => item.value === model.value.orderType);
 });
@@ -29,7 +30,7 @@ function onSelectTradeWay(item: TradeWayConfig) {
   <ion-modal trigger="open-modal" :breakpoints="[0, 0.8]" :initial-breakpoint="0.8" handle>
     <div class="ion-padding">
       <div class="text-xs pb-3 text-text-300">
-        基础委托
+        {{ t('trade.orderType.baseOrder') }}
       </div>
       <div class="flex flex-col gap-4">
         <div v-for="(item, index) in tradeWayConfig" :key="index" class="flex items-center" @click="onSelectTradeWay(item)">
@@ -37,10 +38,10 @@ function onSelectTradeWay(item: TradeWayConfig) {
             <Icon :icon="item.icon" class="text-2xl mr-4" />
             <div class="flex flex-col gap-1">
               <div class="text-base font-semibold">
-                {{ item.name }}
+                {{ t(`trade.orderType.${item.value}`) }}
               </div>
               <div class="text-xs text-text-500">
-                {{ item.description }}
+                {{ t(`trade.orderType.${item.value}Desc`) }}
               </div>
             </div>
           </div>
@@ -55,7 +56,7 @@ function onSelectTradeWay(item: TradeWayConfig) {
           <Icon icon="ic:twotone-more-horiz" class="text-2xl mr-4" />
           <div class="flex flex-col gap-1">
             <div class="text-sm text-text-200">
-              更多委托类型，敬请期待
+              {{ t('trade.orderType.moreTypes') }}
             </div>
           </div>
         </div>

src/views/trade/index.vue

@@ -30,6 +30,7 @@ const tradingViewInst = useTemplateRef<TradingViewInst>("tradingViewInst");
 const confirmModalInst = useTemplateRef<ModalInstance>("confirmModalInst");
 const userStore = useUserStore();
 const router = useRouter();
+const { t } = useI18n();
 
 const [form, reset] = useResetRef<SpotOrderBody & { amount: string }>({
   orderType: TradeWayValueEnum.LIMIT,
@@ -136,7 +137,7 @@ function signIn() {
             {{ symbol }}
           </div>
           <ui-tag size="mini" type="tertiary">
-            现货
+            {{ t('trade.spot') }}
           </ui-tag>
           <ion-icon :icon="caretDownOutline" />
         </div>
@@ -158,31 +159,28 @@ function signIn() {
           <TradeSwitch v-model:active="mode" @update:active="val => form.side = val" />
           <TradeWay v-model="form" />
           <template v-if="form.orderType === 'limit'">
-            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格" @ion-input="handleChangePrice">
+            <ion-input v-model="form.price" :label="t('trade.form.price')" class="count" inputmode="decimal" type="number" :placeholder="t('trade.form.enterPrice')" @ion-input="handleChangePrice">
               <span slot="end">USDT</span>
             </ion-input>
-            <ion-input v-model="form.quantity" label="数量" class="count" inputmode="decimal" type="number" placeholder="请输入交易数量" @ion-input="handleChangeQuantity">
+            <ion-input v-model="form.quantity" :label="t('trade.form.quantity')" class="count" inputmode="decimal" type="number" :placeholder="t('trade.form.enterQuantity')" @ion-input="handleChangeQuantity">
               <span slot="end">{{ symbol }}</span>
             </ion-input>
-            <ion-input v-model="form.amount" label="金额" class="count" inputmode="decimal" type="number" placeholder="请输入交易金额" @ion-input="handleChangeAmount">
+            <ion-input v-model="form.amount" :label="t('trade.form.amount')" class="count" inputmode="decimal" type="number" :placeholder="t('trade.form.enterAmount')" @ion-input="handleChangeAmount">
               <span slot="end">USDT</span>
             </ion-input>
           </template>
           <template v-else-if="form.orderType === 'market'">
-            <!-- <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格">
+            <ion-input v-model="form.quantity" :label="t('trade.form.quantity')" class="count" inputmode="decimal" type="number" :placeholder="t('trade.form.enterQuantity')" @ion-input="handleChangeQuantity">
-              <span slot="end">USDT</span>
-            </ion-input> -->
-            <ion-input v-model="form.quantity" label="数量" class="count" inputmode="decimal" type="number" placeholder="请输入交易数量" @ion-input="handleChangeQuantity">
               <span slot="end">{{ symbol }}</span>
             </ion-input>
           </template>
 
           <!-- <ion-range class="range" aria-label="Range with ticks" :pin="true" :ticks="true" :snaps="true" :min="0" :max="5" /> -->
           <ion-button v-if="userStore.isAuthenticated" expand="block" size="small" shape="round" :color="mode === TradeTypeEnum.BUY ? 'success' : 'danger'" @click="handleSubmit">
-            {{ mode === TradeTypeEnum.BUY ? '买入' : '卖出' }}
+            {{ mode === TradeTypeEnum.BUY ? t('trade.buy') : t('trade.sell') }}
           </ion-button>
           <ion-button v-else expand="block" size="small" shape="round" color="success" @click="signIn">
-            请先登录
+            {{ t('trade.signIn') }}
           </ion-button>
 
           <ion-modal ref="confirmModalInst" class="confirm-modal" :breakpoints="[0, 1]" :initial-breakpoint="1" :handle="false">