feat: 更新 @riwa/api-types 依赖至 0.0.132，优化订单相关组件，修正订单状态枚举

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

@@ -0,0 +1,98 @@
+<script lang='ts' setup>
+import type { Treaty } from "@elysiajs/eden";
+import { alertController, toastController } from "@ionic/vue";
+import { client, safeClient } from "@/api";
+import { orderStatusMap, tradeWayConfig } from "../config";
+
+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 currentTradeWay = computed(() => {
+  return tradeWayConfig.find(item => item.value === props.item.orderType);
+});
+
+async function cancelOrder(orderId: string) {
+  const alert = await alertController.create({
+    header: "取消订单",
+    message: "确定要取消该订单吗？",
+    buttons: [
+      {
+        text: "取消",
+        role: "cancel",
+      },
+      {
+        text: "确定",
+        role: "destructive",
+        handler: async () => {
+          await safeClient(client.api.spot_order.cancel.post({ orderId }));
+          emit("refresh");
+          await alert.dismiss();
+          const toast = await toastController
+            .create({
+              message: "订单已取消",
+              duration: 2000,
+              position: "bottom",
+              color: "success",
+            });
+          await toast.present();
+        },
+      },
+    ],
+  });
+
+  await alert.present();
+}
+</script>
+
+<template>
+  <div class="flex justify-between items-center mb-3">
+    <div class="flex items-center gap-2">
+      <span
+        class="px-2 py-0.5 rounded text-[11px] font-semibold"
+        :class="item.side === 'buy'
+          ? 'bg-success/10 text-(--ion-color-success)'
+          : 'bg-danger/10 text-(--ion-color-danger)'"
+      >
+        {{ item.side === 'buy' ? '买入' : '卖出' }}
+      </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 }}
+      </ion-badge>
+    </div>
+    <button
+      v-if="showCancel && item.status !== 'filled'"
+      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)"
+    >
+      撤单
+    </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) 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) 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) 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) font-medium">{{ Number(item.totalAmount).toString() }} USDT</span>
+    </div>
+  </div>
+
+  <div class="pt-2">
+    <span class="text-[11px] text-(--ion-text-color-step-500)">{{ useDateFormat(item.createdAt, 'YYYY/MM/DD HH:mm:ss') }}</span>
+  </div>
+</template>
+
+<style lang='css' scoped></style>