feat: 重构 RWADatafeed 以使用 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>
 
           <!-- 提交按钮 -->