feat: 更新多个组件的样式和逻辑，优化用户体验和代码可读性

src/views/auth/login/components/phone-number.vue

@@ -27,7 +27,7 @@ const countryCode = ref<string>(countries[0].code);
 const currentCountry = computed<PhoneCountry>(() => {
   return countries.find(c => c.code === countryCode.value) || countries[0];
 });
-let timer: number | null = null;
+let timer: NodeJS.Timeout | null = null;
 
 function dismiss() {
   modalInst.value?.$el.dismiss();

src/views/onchain-address/index.vue

@@ -195,7 +195,7 @@ async function handleDownload() {
       <div class="flex justify-center items-center flex-col mt-20">
         <div
           ref="qrcodeContainer"
-          class="w-[80vw] h-[80vw] bg-gray-50 max-w-130 max-h-130 rounded-[14px] p-4 flex flex-col justify-center items-center relative border border-text-900"
+          class="w-[80vw] h-[80vw] bg-text-950 max-w-130 max-h-130 rounded-[14px] p-4 flex flex-col justify-center items-center relative border border-text-900"
         >
           <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
             <div class="p-1 rounded-full w-fit">
@@ -215,7 +215,7 @@ async function handleDownload() {
               </ion-text>
               <ion-text>
                 <div class="mt-4px text-md font-semibold break-all">
-                  {{ userProfile?.uid }}
+                  {{ userProfile?.userId }}
                 </div>
               </ion-text>
             </div>

src/views/trade-rwa/index.vue

@@ -15,7 +15,7 @@ const { data } = safeClient(client.api.rwa.subscription.available_editions({ edi
 const { t } = useI18n();
 const router = useRouter();
 
-const model = useTemplateRef<ModalInstance>("model");
+const modalInst = useTemplateRef<ModalInstance>("modalInst");
 
 async function handleSubscribe(val: number) {
   await safeClient(client.api.rwa.subscription.apply.post({
@@ -30,7 +30,7 @@ async function handleSubscribe(val: number) {
   });
 
   await toast.present();
-  model.value?.$el.dismiss();
+  modalInst.value?.$el.dismiss();
 }
 function gotoEdit() {
   router.push({ name: "trade-rwa-edit" });
@@ -48,6 +48,9 @@ function gotoEdit() {
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true" class="ion-padding">
+      <ion-modal ref="modalInst" trigger="open-modal" :initial-breakpoint="0.4" :breakpoints="[0, 0.4]">
+        <subscribe-rwa :unit-price="Number(data?.unitPrice || 0)" :max="Number(data?.perUserLimit || 0)" @subscribed="handleSubscribe" />
+      </ion-modal>
       <div>
         <div class="flex items-center space-x-2">
           <CryptocurrencyColorNuls class="text-3xl" />
@@ -85,10 +88,6 @@ function gotoEdit() {
           <ion-button id="open-modal" shape="round" expand="block" color="success">
             {{ t('market.tradeRwa.subscribe') }}
           </ion-button>
-
-          <ion-modal ref="model" trigger="open-modal" :initial-breakpoint="0.4" :breakpoints="[0, 0.4]">
-            <subscribe-rwa :unit-price="Number(data?.unitPrice || 0)" :max="Number(data?.perUserLimit || 0)" @subscribed="handleSubscribe" />
-          </ion-modal>
         </div>
       </ion-toolbar>
     </ion-footer>

src/views/trade-settings/bank-management/add.vue

@@ -135,13 +135,13 @@ function formatCardNumber(value: string) {
                 <ErrorMessage name="accountName" class="text-red-500 text-sm mt-1" />
               </div>
 
-              <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-4">
+              <div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
                 <div class="flex gap-3">
                   <ion-icon
                     :icon="shieldCheckmark"
                     class="text-amber-500 text-xl mt-0.5 shrink-0"
                   />
-                  <div class="text-sm text-amber-700 dark:text-amber-300">
+                  <div class="text-sm text-amber-600">
                     <p class="font-medium mb-1">
                       {{ t('bankCard.form.security.title') }}
                     </p>

src/views/trade-settings/bank-management/index.vue

@@ -115,20 +115,16 @@ onUpdated(() => {
     <IonContent :fullscreen="true">
       <div class="min-h-full">
         <div v-if="bankCards?.length === 0" class="flex flex-col items-center justify-center min-h-[60vh] p-8 text-center">
-          <div class="w-20 h-20 rounded-full bg-[#171717] flex items-center justify-center mb-6 shadow-lg">
+          <div class="w-20 h-20 rounded-full flex items-center justify-center mb-6 shadow-lg">
             <ion-icon :icon="cardOutline" class="text-4xl text-white" />
           </div>
           <h3 class="text-xl font-semibold text-text-200 mb-2">
             {{ t('bankCard.empty.title') }}
           </h3>
-          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-8">
+          <p class="text-sm leading-relaxed mb-8">
             {{ t('bankCard.empty.description') }}
           </p>
-          <ion-button
+          <ion-button expand="block" fill="solid" @click="handleAddCard">
-            expand="block"
-            fill="outline"
-            @click="handleAddCard"
-          >
             <ion-icon slot="start" :icon="addOutline" />
             {{ t('bankCard.empty.addButton') }}
           </ion-button>
@@ -136,15 +132,10 @@ onUpdated(() => {
 
         <div v-else class="p-4">
           <div class="mb-6">
-            <div
+            <ion-button expand="block" @click="handleAddCard">
-              class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 flex items-center cursor-pointer transition-all duration-300 border-2 border-dashed border-gray-200 dark:border-gray-600"
+              <ion-icon slot="start" :icon="addOutline" class="text-xl" />
-              @click="handleAddCard"
+              {{ t('bankCard.list.addCard') }}
-            >
+            </ion-button>
-              <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
-                <ion-icon :icon="addOutline" class="text-white text-xl" />
-              </div>
-              <span class="font-semibold text-#151515 dark:text-white">{{ t('bankCard.list.addCard') }}</span>
-            </div>
           </div>
 
           <!-- 银行卡列表 -->
@@ -156,16 +147,16 @@ onUpdated(() => {
             <div
               v-for="card in bankCards"
               :key="card.id"
-              class="bg-gray-50 dark:bg-gray-900 rounded-2xl mb-4 overflow-hidden shadow-sm transition-all duration-300 relative"
+              class="bg-faint rounded-2xl mb-4 overflow-hidden shadow-sm transition-all duration-300 relative"
             >
               <div class="p-5 flex items-center justify-between">
                 <div class="flex items-center flex-1">
-                  <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-4 text-white font-bold text-sm shadow-sm bg-[#0F5AA6]">
+                  <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-4 font-bold text-sm shadow-sm bg-[#0F5AA6]">
                     <span class="text-white">{{ card.bankCode }}</span>
                   </div>
                   <div class="flex-1">
                     <div class="flex items-center gap-2 mb-1">
-                      <h4 class="text-lg font-semibold text-#151515 dark:text-white m-0">
+                      <h4 class="text-lg font-semibold m-0">
                         {{ card.bankName }}
                       </h4>
                       <span
@@ -175,13 +166,13 @@ onUpdated(() => {
                         {{ t('bankCard.list.defaultCard') }}
                       </span>
                     </div>
-                    <p class="text-gray-600 dark:text-gray-400 text-base m-0 mb-2 tracking-wider">
+                    <p class="text-base m-0 mb-2 tracking-wider">
                       {{ card.maskAccountNumber }}
                     </p>
-                    <div class="flex gap-4 text-sm text-gray-500 dark:text-gray-400">
+                    <div class="flex gap-4 text-sm">
-                      <span class="px-2 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-md text-xs">
+                      <ui-tag size="small">
                         {{ t('bankCard.list.debitCard') }}
-                      </span>
+                      </ui-tag>
                       <span>{{ card.accountName }}</span>
                     </div>
                   </div>
@@ -190,7 +181,6 @@ onUpdated(() => {
                 <div class="ml-4">
                   <ion-button
                     fill="clear"
-                    class="[--color:var(--color-gray-600)] [--background:transparent] w-10 h-10 hover:[--background:var(--color-gray-100)]"
                     @click="handleCardOptions(card)"
                   >
                     <ion-icon slot="icon-only" :icon="ellipsisHorizontal" />
@@ -207,12 +197,12 @@ onUpdated(() => {
           </div>
 
           <!-- 底部提示 -->
-          <div class="rounded-xl p-4 mt-4 b-2px bg-gray-50 dark:bg-gray-900">
+          <div class="rounded-xl p-4 mt-4 b-2px bg-faint">
-            <div class="flex items-center gap-3 mb-3 text-sm text-gray-600 dark:text-gray-400">
+            <div class="flex items-center gap-3 mb-3 text-sm">
               <ion-icon :icon="checkmarkCircle" class="text-base text-green-500" />
               <span>{{ t('bankCard.tips.encryption') }}</span>
             </div>
-            <div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
+            <div class="flex items-center gap-3 text-sm">
               <ion-icon :icon="checkmarkCircle" class="text-base text-green-500" />
               <span>{{ t('bankCard.tips.support') }}</span>
             </div>
@@ -223,33 +213,4 @@ onUpdated(() => {
   </IonPage>
 </template>
 
-<style scoped>
+<style lang="css" scoped></style>
-@media (max-width: 768px) {
-  .p-4 {
-    padding: 0.75rem;
-  }
-
-  .p-8 {
-    padding: 1.5rem;
-  }
-
-  .w-20 {
-    width: 4.25rem;
-    height: 4.25rem;
-  }
-
-  .p-5 {
-    padding: 1rem;
-  }
-
-  .w-12 {
-    width: 2.75rem;
-    height: 2.75rem;
-    font-size: 0.75rem;
-  }
-
-  .text-lg {
-    font-size: 1rem;
-  }
-}
-</style>