feat: 重构 RWADatafeed 以使用 TradeWebSocket，优化订阅和取消订阅逻辑；在转账组件中添加币种选择和可用余额同步功能

src/tradingview/datafeed.ts

@@ -13,15 +13,14 @@ import type {
   SubscribeBarsCallback,
 } from "#/datafeed-api";
 import type { MarketDataStreaming } from "@/api/types";
-import { client } from "@/api";
+import { tradeWebSocket } from "./websocket";
 
 /**
  * 自定义 TradingView Datafeed 实现
  * 用于从后端 API 获取 K 线数据
  */
 export class RWADatafeed extends Datafeeds.UDFCompatibleDatafeed {
-  private subscribers: Map<string, { callback: SubscribeBarsCallback; resolution: ResolutionString }> = new Map();
-  private wsConnections: Map<string, MarketDataStreaming> = new Map();
+  private subscribers: Map<string, { callback: SubscribeBarsCallback; resolution: ResolutionString; symbol: string }> = new Map();
 
   constructor(apiUrl: string) {
     super(apiUrl);
@@ -203,28 +202,30 @@ export class RWADatafeed extends Datafeeds.UDFCompatibleDatafeed {
     subscriberUID: string,
     onResetCacheNeededCallback: () => void,
   ): void {
-    console.log("[RWADatafeed]: subscribeBars", {
-      symbol: symbolInfo.name,
-      resolution,
-      subscriberUID,
-    });
-    this.subscribers.set(subscriberUID, { callback: onTick, resolution });
-    const ws = client.api.market_data.streaming.subscribe();
-    this.wsConnections.set(subscriberUID, ws);
-    ws.on("open", () => {
-      ws.send({ type: "subscribe", subscriberUID, symbol: symbolInfo.name, resolution });
+    console.log("[RWADatafeed]: subscribeBars", { symbol: symbolInfo.name, resolution, subscriberUID });
+
+    this.subscribers.set(subscriberUID, { callback: onTick, resolution, symbol: symbolInfo.name });
+    const wsConnection = tradeWebSocket.getSocket();
+
+    wsConnection.send({
+      action: "subscribe",
+      channels: [{
+        name: "bar",
+        symbol: symbolInfo.name,
+      }],
     });
 
-    ws.subscribe((message) => {
-      if (message.data.type !== "bar")
+    wsConnection.subscribe((message) => {
+      const data = message.data as any;
+      if (data.type !== "bar")
         return;
       const bar: Bar = {
-        time: message.data.bar.time,
-        open: message.data.bar.open,
-        high: message.data.bar.high,
-        low: message.data.bar.low,
-        close: message.data.bar.close,
-        volume: message.data.bar.volume,
+        time: data.bar.time,
+        open: data.bar.open,
+        high: data.bar.high,
+        low: data.bar.low,
+        close: data.bar.close,
+        volume: data.bar.volume,
       };
       onTick(bar);
     });
@@ -235,10 +236,14 @@ export class RWADatafeed extends Datafeeds.UDFCompatibleDatafeed {
    */
   unsubscribeBars(subscriberUID: string): void {
     console.log("[RWADatafeed]: unsubscribeBars", subscriberUID);
-    const ws = this.wsConnections.get(subscriberUID);
-    if (ws) {
-      ws.close();
-      this.wsConnections.delete(subscriberUID);
-    }
+    const subscriber = this.subscribers.get(subscriberUID);
+    const wsConnection = tradeWebSocket.getSocket();
+    wsConnection.send({
+      action: "unsubscribe",
+      channels: [{
+        name: "bar",
+        symbol: subscriber?.symbol || "",
+      }],
+    });
   }
 }

src/tradingview/websocket.ts

@@ -0,0 +1,24 @@
+import type { MarketDataStreaming } from "@/api/types";
+import { client } from "@/api";
+
+export class TradeWebSocket {
+  public socket: MarketDataStreaming | null = null;
+  constructor() {
+    if (!this.socket) {
+      this.socket = client.api.market_data.streaming.subscribe();
+    }
+  }
+
+  public getSocket(): MarketDataStreaming {
+    return this.socket!;
+  }
+
+  public closeSocket() {
+    if (this.socket) {
+      this.socket.close();
+      this.socket = null;
+    }
+  }
+}
+
+export const tradeWebSocket = new TradeWebSocket();

src/views/wallet/transfer.vue

@@ -1,13 +1,15 @@
 <script lang='ts' setup>
 import type { GenericObject } from "vee-validate";
 import type { FormInstance } from "@/utils";
-import { loadingController, toastController } from "@ionic/vue";
+import { loadingController, modalController, toastController } from "@ionic/vue";
+import { toTypedSchema } from "@vee-validate/zod";
 import { swapVerticalOutline } from "ionicons/icons";
 import { ErrorMessage, Field, Form } from "vee-validate";
 import { z } from "zod";
 import { client, safeClient } from "@/api";
 import { AssetCodeEnum } from "@/api/enum";
 import { getCryptoIcon } from "@/config/crypto";
+import SelectCurrency from "../withdraw/components/select-currency.vue";
 
 const { t } = useI18n();
 const router = useRouter();
@@ -31,18 +33,41 @@ const initialValues: TransferForm = {
   fromAccount: "funding",
   toAccount: "trading",
 };
+const availableBalance = ref("0");
 
 // 验证规则
-const schema = computed(() => z.object({
+const schema = computed(() => toTypedSchema(z.object({
   assetCode: z.string({ message: t("transfer.assetCodeRequired") }).min(1, t("transfer.assetCodeRequired")),
   amount: z
-    .string({ message: t("transfer.amountRequired") })
-    .min(1, t("transfer.amountRequired"))
-    .refine(value => Number(value) > 0, t("transfer.amountMinError"))
-    .refine(value => Number(value) <= Number(USDTBalance.value?.available), t("transfer.amountMaxError", { amount: USDTBalance.value?.available })),
+    .union([z.string(), z.number()])
+    .refine(value => !Number.isNaN(Number(value)) && Number(value) > 0, { message: t("transfer.amountMinError") })
+    .refine(value => Number(value) <= Number(availableBalance.value || 0), { message: t("transfer.amountMaxError", { amount: availableBalance.value }) }),
   fromAccount: z.string({ message: t("transfer.fromAccountRequired") }).min(1, t("transfer.fromAccountRequired")),
   toAccount: z.string({ message: t("transfer.toAccountRequired") }).min(1, t("transfer.toAccountRequired")),
-}));
+})));
+
+// 监听表单字段变化，自动更新可用余额
+watch(() => formRef.value?.getValues(), (values) => {
+  if (values?.assetCode && values?.fromAccount) {
+    syncAvailableBalance();
+  }
+}, { deep: true });
+
+async function openSelectCurrency() {
+  const modal = await modalController.create({
+    component: SelectCurrency,
+    componentProps: {
+      onSelect: (code: string) => {
+        formRef.value?.setFieldValue("assetCode", code);
+        syncAvailableBalance();
+      },
+    },
+    breakpoints: [0, 0.8],
+    initialBreakpoint: 0.8,
+    handle: true,
+  });
+  await modal.present();
+}
 
 // 交换账户
 function swapAccounts() {
@@ -55,6 +80,9 @@ function swapAccounts() {
 
   form.setFieldValue("fromAccount", currentTo);
   form.setFieldValue("toAccount", currentFrom);
+
+  // 交换账户后重新获取余额
+  syncAvailableBalance();
 }
 
 // 设置全部金额
@@ -63,9 +91,26 @@ function setMaxAmount() {
   if (!form)
     return;
 
-  form.setFieldValue("amount", USDTBalance.value?.available || "0");
+  form.setFieldValue("amount", availableBalance.value || "0");
 }
 
+async function syncAvailableBalance() {
+  const values = formRef.value?.getValues();
+  if (!values || !values.assetCode || !values.fromAccount)
+    return;
+  const { data } = await safeClient(client.api.wallet.balance({ assetCode: values.assetCode }).get({
+    query: { accountType: values.fromAccount },
+  }));
+  if (data.value) {
+    availableBalance.value = data.value.available;
+  }
+}
+
+// 初始化时获取余额
+onMounted(() => {
+  syncAvailableBalance();
+});
+
 // 提交划转
 async function onSubmit(values: GenericObject) {
   const loading = await loadingController.create({
@@ -128,27 +173,20 @@ function getAccountTypeName(type: AccountType) {
           <!-- 币种选择 -->
           <div>
             <Field name="assetCode">
-              <template #default="{ field, value }">
-                <ion-radio-group v-bind="field" :model-value="value">
-                  <ion-label class="block text-sm font-medium mb-3">
-                    {{ t("transfer.chooseCurrency") }}
-                  </ion-label>
-                  <div class="flex gap-3">
-                    <ion-item
-                      v-for="item in AssetCodeEnum"
-                      :key="item"
-                      class="flex-1"
-                      lines="none"
-                    >
-                      <ion-radio :value="item">
-                        <div class="flex items-center gap-2">
-                          <component :is="getCryptoIcon(item)" class="w-6 h-6" />
-                          {{ item }}
-                        </div>
-                      </ion-radio>
-                    </ion-item>
+              <template #default="{ value }">
+                <ion-label class="block text-sm font-medium mb-2">
+                  选择币种
+                </ion-label>
+                <div
+                  class="flex items-center justify-between bg-text-900 rounded-2xl p-4 cursor-pointer"
+                  @click="openSelectCurrency"
+                >
+                  <div class="flex items-center gap-3">
+                    <component :is="getCryptoIcon(value)" class="w-8 h-8" />
+                    <span class="text-base font-medium">{{ value }}</span>
                   </div>
-                </ion-radio-group>
+                  <ion-icon name="chevron-forward-outline" class="text-text-400" />
+                </div>
               </template>
             </Field>
             <ErrorMessage name="assetCode" class="text-red-500 text-xs mt-1" />
@@ -205,10 +243,10 @@ function getAccountTypeName(type: AccountType) {
                   <ion-button
                     fill="clear"
                     size="small"
-                    class="absolute right-0 top-8 text-sm font-semibold"
+                    class="absolute right-0 top-10.5 text-sm font-semibold z-10"
                     @click="setMaxAmount"
                   >
-                    {{ t("transfer.all") }}
+                    全部
                   </ion-button>
                 </div>
               </template>
@@ -219,7 +257,7 @@ function getAccountTypeName(type: AccountType) {
           <!-- 可用余额 -->
           <div class="flex items-center gap-2">
             <span class="text-sm text-(--ion-color-medium)">{{ t("transfer.available") }}</span>
-            <span class="text-sm font-medium">{{ Number(USDTBalance?.available).toFixed(2) }}</span>
+            <span class="text-sm font-medium">{{ Number(availableBalance).toFixed(2) }}</span>
           </div>
 
           <!-- 提交按钮 -->