root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Seven
2026-01-14 03:45:38 +07:00
parent 09cdfa0be8
commit 33391afc0a
7 changed files with 101 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/locales/zh-CN.json
View File

@@ -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": "上传文件",

23
src/views/trade/components/confirm-order.vue
View File

@@ -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>

25
src/views/trade/components/order-card.vue
View File

@@ -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: "取消订单",
message: "确定要取消该订单吗？",
header: t("trade.orders.cancelConfirm"),
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>

6
src/views/trade/components/orders-panel.vue
View File

@@ -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>

5
src/views/trade/components/trade-switch.vue
View File

@@ -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>

9
src/views/trade/components/trade-way.vue
View File

@@ -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>

18
src/views/trade/index.vue
View File

@@ -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="请输入价格">
<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>
</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">