From 18ac89a0df416b7cc69f3fc8c80cd2d5c68f07e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E4=B8=81?= <martin@qq.com>
Date: Sat, 4 Jul 2026 20:22:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=EF=BC=9A=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E6=B2=A1=E7=94=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Wallet.vue | 702 +++++--------------------------------------
 1 file changed, 82 insertions(+), 620 deletions(-)

diff --git a/src/views/Wallet.vue b/src/views/Wallet.vue
index f7e7858..1472116 100644
--- a/src/views/Wallet.vue
+++ b/src/views/Wallet.vue
@@ -8,42 +8,27 @@
         </div>
         <div class="card-value">
           <div class="main-balance">${{ portfolioBalance }}</div>
-          <div class="available-balance">({{ t('wallet.availableAssets') }}: ${{ userStore.balance }})</div>
+          <div class="available-balance">
+            ({{ t('wallet.availableAssets') }}: ${{ userStore.balance }})
+          </div>
         </div>
       </v-card>
       <div class="card-actions design-tu-actions">
         <WalletDepositModule />
-        <v-btn
-          color="default"
-          variant="outlined"
-          class="action-btn design-tu-action"
-          @click="withdrawDialogOpen = true"
-        >
+        <v-btn color="default" variant="outlined" class="action-btn design-tu-action"
+          @click="withdrawDialogOpen = true">
           {{ t('wallet.withdraw') }}
         </v-btn>
       </div>
 
-      <v-card
-        v-if="unsettledCount > 0"
-        class="settlement-card design-tu-settlement"
-        elevation="0"
-        rounded="lg"
-      >
+      <v-card v-if="unsettledCount > 0" class="settlement-card design-tu-settlement" elevation="0" rounded="lg">
         <div class="settlement-inner">
           <div class="settlement-label">
             {{ t('wallet.youWon', { amount: unsettledTotalText }) }}
-            <span v-if="unsettledCount > 1" class="settlement-plus-n"
-              >+{{ unsettledCount - 1 }}</span
-            >
+            <span v-if="unsettledCount > 1" class="settlement-plus-n">+{{ unsettledCount - 1 }}</span>
           </div>
-          <v-btn
-            color="primary"
-            variant="flat"
-            class="settlement-claim-btn design-tu-claim-btn"
-            :loading="claimLoading"
-            :disabled="claimLoading"
-            @click="onClaimSettlement"
-          >
+          <v-btn color="primary" variant="flat" class="settlement-claim-btn design-tu-claim-btn" :loading="claimLoading"
+            :disabled="claimLoading" @click="onClaimSettlement">
             {{ t('wallet.claim') }}
           </v-btn>
         </div>
@@ -68,28 +53,18 @@
               <div v-else-if="filteredPositions.length === 0" class="empty-cell">
                 {{ t('wallet.noPositionsFound') }}
               </div>
-              <div
-                v-for="pos in paginatedPositions"
-                :key="pos.id"
-                class="position-mobile-card design-pos-card"
+              <div v-for="pos in paginatedPositions" :key="pos.id" class="position-mobile-card design-pos-card"
                 :class="{ 'wallet-row--nav': canOpenTradeDetail(pos) }"
-                :role="canOpenTradeDetail(pos) ? 'button' : undefined"
-                :tabindex="canOpenTradeDetail(pos) ? 0 : -1"
+                :role="canOpenTradeDetail(pos) ? 'button' : undefined" :tabindex="canOpenTradeDetail(pos) ? 0 : -1"
                 @click="onPositionRowClick(pos)"
                 @keydown.enter.prevent="canOpenTradeDetail(pos) && onPositionRowClick(pos)"
-                @keydown.space.prevent="canOpenTradeDetail(pos) && onPositionRowClick(pos)"
-              >
+                @keydown.space.prevent="canOpenTradeDetail(pos) && onPositionRowClick(pos)">
                 <div class="design-pos-top">
                   <div class="design-pos-left">
                     <div class="position-icon" :class="pos.iconClass">
                       <template v-if="pos.imageUrl">
-                        <img
-                          v-if="isWalletRemoteIconOk(`p-${pos.id}`)"
-                          :src="pos.imageUrl"
-                          alt=""
-                          class="position-icon-img"
-                          @error="markWalletRemoteIconFailed(`p-${pos.id}`)"
-                        />
+                        <img v-if="isWalletRemoteIconOk(`p-${pos.id}`)" :src="pos.imageUrl" alt=""
+                          class="position-icon-img" @error="markWalletRemoteIconFailed(`p-${pos.id}`)" />
                         <v-icon v-else size="20" class="position-icon-svg">mdi-currency-usd</v-icon>
                       </template>
                       <v-icon v-else-if="pos.icon" size="20" class="position-icon-svg">{{
@@ -100,11 +75,8 @@
                     <div class="design-pos-title-col">
                       <MarqueeTitle :text="pos.market" title-class="position-mobile-title" />
                       <div class="design-pos-tags">
-                        <span
-                          v-if="pos.outcomeTag"
-                          class="position-outcome-pill"
-                          :class="getOutcomeClass(pos.outcomeTag, pos.outcomePillClass)"
-                        >
+                        <span v-if="pos.outcomeTag" class="position-outcome-pill"
+                          :class="getOutcomeClass(pos.outcomeTag, pos.outcomePillClass)">
                           {{ pos.outcomeTag }}
                         </span>
                       </div>
@@ -112,13 +84,10 @@
                   </div>
                   <div class="design-pos-right">
                     <div class="position-value">{{ pos.value }}</div>
-                    <div
-                      v-if="pos.valueChange != null"
-                      :class="[
-                        'position-value-change',
-                        pos.valueChangeLoss ? 'value-loss' : 'value-gain',
-                      ]"
-                    >
+                    <div v-if="pos.valueChange != null" :class="[
+                      'position-value-change',
+                      pos.valueChangeLoss ? 'value-loss' : 'value-gain',
+                    ]">
                       {{ pos.valueChange
                       }}{{ pos.valueChangePct != null ? ` (${pos.valueChangePct})` : '' }}
                     </div>
@@ -152,56 +121,33 @@
               <div v-else-if="filteredOpenOrders.length === 0" class="empty-cell">
                 {{ t('wallet.noOpenOrdersFound') }}
               </div>
-              <div
-                v-for="ord in paginatedOpenOrders"
-                :key="ord.id"
-                class="order-mobile-card design-order-card"
+              <div v-for="ord in paginatedOpenOrders" :key="ord.id" class="order-mobile-card design-order-card"
                 :class="{ 'wallet-row--nav': canOpenTradeDetail(ord) }"
-                :role="canOpenTradeDetail(ord) ? 'button' : undefined"
-                :tabindex="canOpenTradeDetail(ord) ? 0 : -1"
+                :role="canOpenTradeDetail(ord) ? 'button' : undefined" :tabindex="canOpenTradeDetail(ord) ? 0 : -1"
                 @click="onOpenOrderRowClick(ord)"
                 @keydown.enter.prevent="canOpenTradeDetail(ord) && onOpenOrderRowClick(ord)"
-                @keydown.space.prevent="canOpenTradeDetail(ord) && onOpenOrderRowClick(ord)"
-              >
+                @keydown.space.prevent="canOpenTradeDetail(ord) && onOpenOrderRowClick(ord)">
                 <div class="design-order-top">
                   <div class="order-mobile-icon" :class="ord.iconClass">
                     <template v-if="ord.imageUrl">
-                      <img
-                        v-if="isWalletRemoteIconOk(`o-${ord.id}`)"
-                        :src="ord.imageUrl"
-                        alt=""
-                        class="position-icon-img"
-                        @error="markWalletRemoteIconFailed(`o-${ord.id}`)"
-                      />
+                      <img v-if="isWalletRemoteIconOk(`o-${ord.id}`)" :src="ord.imageUrl" alt=""
+                        class="position-icon-img" @error="markWalletRemoteIconFailed(`o-${ord.id}`)" />
                       <v-icon v-else size="20" class="position-icon-svg">mdi-currency-usd</v-icon>
                     </template>
                     <span v-else class="position-icon-char">{{ ord.iconChar || '•' }}</span>
                   </div>
                   <div class="order-mobile-main design-order-title-col">
-                    <MarqueeTitle
-                      :text="getOrderDisplayTitle(ord)"
-                      title-class="order-mobile-title"
-                      fast
-                    />
+                    <MarqueeTitle :text="getOrderDisplayTitle(ord)" title-class="order-mobile-title" fast />
                     <div class="design-order-tags">
                       <span class="order-side-pill" :class="getOrderSideClass(ord)">{{
                         getOrderActionLabel(ord)
                       }}</span>
-                      <span
-                        class="order-outcome-pill"
-                        :class="ord.side === 'Yes' ? 'outcome-yes' : 'outcome-no'"
-                        >{{ ord.side }}</span
-                      >
+                      <span class="order-outcome-pill" :class="ord.side === 'Yes' ? 'outcome-yes' : 'outcome-no'">{{
+                        ord.side }}</span>
                     </div>
                   </div>
-                  <v-btn
-                    icon
-                    variant="text"
-                    size="small"
-                    class="order-cancel-icon"
-                    :disabled="cancelOrderLoading || ord.fullyFilled"
-                    @click.stop="cancelOrder(ord)"
-                  >
+                  <v-btn icon variant="text" size="small" class="order-cancel-icon"
+                    :disabled="cancelOrderLoading || ord.fullyFilled" @click.stop="cancelOrder(ord)">
                     <v-icon size="20">mdi-close</v-icon>
                   </v-btn>
                 </div>
@@ -235,32 +181,19 @@
               <div v-else-if="filteredHistory.length === 0" class="empty-cell">
                 {{ t('wallet.noHistoryFound') }}
               </div>
-              <div
-                v-for="h in paginatedHistory"
-                :key="h.id"
-                class="history-mobile-card"
-                :class="[
-                  isFundingHistory(h) ? 'design-funding-card' : 'design-trade-card',
-                  { 'wallet-row--nav': historyRowCanOpenDetail(h) },
-                ]"
-                :role="historyRowCanOpenDetail(h) ? 'button' : undefined"
-                :tabindex="historyRowCanOpenDetail(h) ? 0 : undefined"
-                @click="onHistoryRowClick(h)"
-                @keydown.enter.prevent="onHistoryRowClick(h)"
-                @keydown.space.prevent="onHistoryRowClick(h)"
-              >
+              <div v-for="h in paginatedHistory" :key="h.id" class="history-mobile-card" :class="[
+                isFundingHistory(h) ? 'design-funding-card' : 'design-trade-card',
+                { 'wallet-row--nav': historyRowCanOpenDetail(h) },
+              ]" :role="historyRowCanOpenDetail(h) ? 'button' : undefined"
+                :tabindex="historyRowCanOpenDetail(h) ? 0 : undefined" @click="onHistoryRowClick(h)"
+                @keydown.enter.prevent="onHistoryRowClick(h)" @keydown.space.prevent="onHistoryRowClick(h)">
                 <template v-if="!isFundingHistory(h)">
                   <div class="design-history-top">
                     <div class="design-history-left">
                       <div class="history-mobile-icon" :class="h.iconClass">
                         <template v-if="h.imageUrl">
-                          <img
-                            v-if="isWalletRemoteIconOk(`h-${h.id}`)"
-                            :src="h.imageUrl"
-                            alt=""
-                            class="position-icon-img"
-                            @error="markWalletRemoteIconFailed(`h-${h.id}`)"
-                          />
+                          <img v-if="isWalletRemoteIconOk(`h-${h.id}`)" :src="h.imageUrl" alt=""
+                            class="position-icon-img" @error="markWalletRemoteIconFailed(`h-${h.id}`)" />
                           <v-icon v-else size="20" class="position-icon-svg">mdi-currency-usd</v-icon>
                         </template>
                         <span v-else class="position-icon-char">{{ h.iconChar || '•' }}</span>
@@ -272,9 +205,7 @@
                         </div>
                       </div>
                     </div>
-                    <span
-                      :class="['history-mobile-pl', h.profitLossNegative ? 'pl-loss' : 'pl-gain']"
-                    >
+                    <span :class="['history-mobile-pl', h.profitLossNegative ? 'pl-loss' : 'pl-gain']">
                       {{ h.profitLoss ?? h.value }}
                     </span>
                   </div>
@@ -282,10 +213,8 @@
                     <span class="order-side-pill" :class="getHistoryTagClass(h)">
                       {{ getHistoryTagLabel(h) }}
                     </span>
-                    <span class="design-history-meta"
-                      >{{ t('wallet.priceLabel') }}: {{ h.avgPrice || '—' }} ·
-                      {{ t('wallet.sharesLabel') }}: {{ h.shares || '—' }}</span
-                    >
+                    <span class="design-history-meta">{{ t('wallet.priceLabel') }}: {{ h.avgPrice || '—' }} ·
+                      {{ t('wallet.sharesLabel') }}: {{ h.shares || '—' }}</span>
                   </div>
                 </template>
                 <template v-else>
@@ -296,20 +225,14 @@
                       </div>
                     </div>
                     <div class="history-mobile-main">
-                      <MarqueeTitle
-                        :text="getFundingTitle(h, t)"
-                        title-class="history-mobile-title"
-                        fast
-                      />
+                      <MarqueeTitle :text="getFundingTitle(h, t)" title-class="history-mobile-title" fast />
                       <div class="history-mobile-activity">{{ h.timeAgo || '—' }}</div>
                     </div>
                   </div>
-                  <span
-                    :class="[
-                      'history-mobile-pl',
-                      isWithdrawalHistory(h) || h.profitLossNegative ? 'pl-loss' : 'pl-gain',
-                    ]"
-                  >
+                  <span :class="[
+                    'history-mobile-pl',
+                    isWithdrawalHistory(h) || h.profitLossNegative ? 'pl-loss' : 'pl-gain',
+                  ]">
                     {{ h.profitLoss ?? h.value }}
                   </span>
                 </template>
@@ -317,13 +240,8 @@
             </div>
           </template>
           <template v-else-if="activeTab === 'depositHistory'">
-            <WalletDepositHistoryPanel
-              :page="page"
-              :items-per-page="itemsPerPage"
-              :search="search"
-              :active="activeTab === 'depositHistory'"
-              @update:total="depositHistoryTotal = $event"
-            />
+            <WalletDepositHistoryPanel :page="page" :items-per-page="itemsPerPage" :search="search"
+              :active="activeTab === 'depositHistory'" @update:total="depositHistoryTotal = $event" />
           </template>
           <template v-else-if="activeTab === 'withdrawals'">
             <div class="withdrawals-mobile-list">
@@ -334,11 +252,8 @@
               <div v-else-if="displayedWithdrawals.length === 0" class="empty-cell">
                 {{ t('wallet.noWithdrawalsFound') }}
               </div>
-              <div
-                v-for="w in displayedWithdrawals"
-                :key="String(w.ID ?? w.requestNo ?? '')"
-                class="withdrawal-mobile-card design-withdraw-card"
-              >
+              <div v-for="w in displayedWithdrawals" :key="String(w.ID ?? w.requestNo ?? '')"
+                class="withdrawal-mobile-card design-withdraw-card">
                 <div class="design-withdraw-top">
                   <div class="design-withdraw-head">
                     <div class="design-withdraw-date">
@@ -366,12 +281,8 @@
                     <div class="withdrawal-mobile-address">
                       {{ shortAddress(w.tokenAddress ?? w.walletAddress) }}
                     </div>
-                    <button
-                      v-if="isWithdrawStatusRejected(w.status)"
-                      type="button"
-                      class="withdrawal-view-reason-link"
-                      @click.stop="openWithdrawRejectReasonDialog(w)"
-                    >
+                    <button v-if="isWithdrawStatusRejected(w.status)" type="button" class="withdrawal-view-reason-link"
+                      @click.stop="openWithdrawRejectReasonDialog(w)">
                       {{ t('wallet.withdrawViewRejectReason') }}
                     </button>
                   </div>
@@ -387,45 +298,21 @@
               {{ currentPageStart }}–{{ currentPageEnd }} of {{ currentListTotal }}
             </span>
             <div class="pagination-controls">
-              <v-select
-                v-model="itemsPerPage"
-                :items="pageSizeOptions"
-                density="compact"
-                hide-details
-                variant="outlined"
-                class="page-size-select"
-                @update:model-value="page = 1"
-              />
-              <v-pagination
-                v-model="page"
-                :length="currentTotalPages"
-                :total-visible="5"
-                density="comfortable"
-                class="pagination"
-                @update:model-value="onPageChange"
-              />
+              <v-select v-model="itemsPerPage" :items="pageSizeOptions" density="compact" hide-details
+                variant="outlined" class="page-size-select" @update:model-value="page = 1" />
+              <v-pagination v-model="page" :length="currentTotalPages" :total-visible="5" density="comfortable"
+                class="pagination" @update:model-value="onPageChange" />
             </div>
           </div>
         </v-card>
       </div>
     </div>
 
-    <WithdrawDialog
-      v-model="withdrawDialogOpen"
-      :balance="portfolioBalance"
-      @success="onWithdrawSuccess"
-    />
+    <WithdrawDialog v-model="withdrawDialogOpen" :balance="portfolioBalance" @success="onWithdrawSuccess" />
 
     <v-dialog v-model="withdrawRejectReasonDialogOpen" max-width="440">
-      <v-card
-        class="withdraw-reject-dialog-card"
-        elevation="0"
-        rounded="lg"
-        role="button"
-        tabindex="0"
-        @click="closeWithdrawRejectReasonDialog"
-        @keydown.enter.prevent="closeWithdrawRejectReasonDialog"
-      >
+      <v-card class="withdraw-reject-dialog-card" elevation="0" rounded="lg" role="button" tabindex="0"
+        @click="closeWithdrawRejectReasonDialog" @keydown.enter.prevent="closeWithdrawRejectReasonDialog">
         <div class="withdraw-reject-dialog-header">
           <h2 class="withdraw-reject-dialog-title">{{ t('wallet.withdrawRejectReasonTitle') }}</h2>
         </div>
@@ -436,12 +323,7 @@
     </v-dialog>
 
     <!-- 授权弹窗 -->
-    <v-dialog
-      v-model="authorizeDialogOpen"
-      max-width="420"
-      persistent
-      transition="dialog-transition"
-    >
+    <v-dialog v-model="authorizeDialogOpen" max-width="420" persistent transition="dialog-transition">
       <v-card rounded="lg">
         <v-card-title class="d-flex align-center">
           <v-icon class="mr-2">mdi-shield-check-outline</v-icon>
@@ -463,22 +345,11 @@
     </v-dialog>
 
     <!-- Sell position dialog -->
-    <v-dialog
-      v-model="sellDialogOpen"
-      max-width="440"
-      persistent
-      content-class="sell-dialog"
-      transition="dialog-transition"
-    >
+    <v-dialog v-model="sellDialogOpen" max-width="440" persistent content-class="sell-dialog"
+      transition="dialog-transition">
       <v-card v-if="sellPositionItem" class="sell-dialog-card" rounded="lg">
         <div class="sell-dialog-header">
-          <v-btn
-            icon
-            variant="text"
-            size="small"
-            class="sell-dialog-close"
-            @click="closeSellDialog"
-          >
+          <v-btn icon variant="text" size="small" class="sell-dialog-close" @click="closeSellDialog">
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </div>
@@ -486,13 +357,8 @@
           <div class="sell-dialog-icon-wrap">
             <div class="position-icon" :class="sellPositionItem.iconClass">
               <template v-if="sellPositionItem.imageUrl">
-                <img
-                  v-if="isWalletRemoteIconOk(`s-${sellPositionItem.id}`)"
-                  :src="sellPositionItem.imageUrl"
-                  alt=""
-                  class="position-icon-img"
-                  @error="markWalletRemoteIconFailed(`s-${sellPositionItem.id}`)"
-                />
+                <img v-if="isWalletRemoteIconOk(`s-${sellPositionItem.id}`)" :src="sellPositionItem.imageUrl" alt=""
+                  class="position-icon-img" @error="markWalletRemoteIconFailed(`s-${sellPositionItem.id}`)" />
                 <v-icon v-else size="20" class="position-icon-svg">mdi-currency-usd</v-icon>
               </template>
               <v-icon v-else-if="sellPositionItem.icon" size="20" class="position-icon-svg">{{
@@ -609,7 +475,9 @@ const plTimeRanges = computed(() => [
   { label: t('wallet.pl1M'), value: '1M' },
   { label: t('wallet.plAll'), value: 'ALL' },
 ])
-const activeTab = ref<'positions' | 'orders' | 'history' | 'depositHistory' | 'withdrawals'>('positions')
+const activeTab = ref<'positions' | 'orders' | 'history' | 'depositHistory' | 'withdrawals'>(
+  'positions',
+)
 const search = ref('')
 const withdrawStatusFilter = ref<string>('')
 const withdrawStatusOptions = computed(() => [
@@ -1136,11 +1004,11 @@ function getWithdrawAmountText(w: SettlementRequestClientItem): string {
 function getWithdrawFeeText(w: SettlementRequestClientItem): string {
   const feeRaw = Number(
     (w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number }).fee ??
-      (w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number })
-        .gasFee ??
-      (w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number })
-        .serviceFee ??
-      0,
+    (w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number })
+      .gasFee ??
+    (w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number })
+      .serviceFee ??
+    0,
   )
   const feeText = Number.isFinite(feeRaw)
     ? feeRaw.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 4 })
@@ -1195,7 +1063,9 @@ const filteredOpenOrders = computed(() => {
 })
 const filteredHistory = computed(() => {
   const list = USE_MOCK_WALLET ? history.value : historyList.value
-  return list.filter((h) => matchSearch(h.market) && (USE_MOCK_WALLET ? !isFundingHistory(h) : true))
+  return list.filter(
+    (h) => matchSearch(h.market) && (USE_MOCK_WALLET ? !isFundingHistory(h) : true),
+  )
 })
 const page = ref(1)
 const itemsPerPage = ref(10)
@@ -1544,10 +1414,6 @@ async function submitAuthorize() {
   line-height: 1.2;
 }
 
-.wallet-cards {
-  margin-bottom: 32px;
-}
-
 .wallet-card {
   padding: 16px;
   border: 1px solid #e5e7eb;
@@ -1621,21 +1487,6 @@ async function submitAuthorize() {
   gap: 4px;
 }
 
-.title-icon {
-  color: #9ca3af;
-}
-
-.balance-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: #374151;
-  background-color: #f3f4f6;
-  padding: 4px 8px;
-  border-radius: 6px;
-}
-
 .card-value {
   display: flex;
   flex-direction: column;
@@ -1657,27 +1508,6 @@ async function submitAuthorize() {
   line-height: 1.2;
 }
 
-.card-value-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-}
-
-.card-value-row .card-value {
-  margin-bottom: 0;
-}
-
-.info-icon {
-  color: #9ca3af;
-}
-
-.card-timeframe {
-  font-size: 12px;
-  color: #6b7280;
-  margin-bottom: 16px;
-}
-
 .card-actions {
   display: flex;
   gap: 10px;
@@ -1688,27 +1518,7 @@ async function submitAuthorize() {
   text-transform: none;
 }
 
-.pl-tabs {
-  display: flex;
-  gap: 4px;
-}
-
-.pl-tab {
-  min-width: 40px;
-  text-transform: none;
-  font-size: 12px;
-}
-
-.pl-chart {
-  height: 120px;
-  width: 100%;
-  margin-top: 4px;
-}
-
 /* 未结算汇总：单条 item，多条 +N，领取按钮无图标 */
-.wallet-settlement-row {
-  margin-top: 16px;
-}
 
 .settlement-card {
   border: 1px solid #e5e7eb;
@@ -1795,27 +1605,6 @@ async function submitAuthorize() {
   display: none;
 }
 
-.toolbar {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-}
-
-.search-field {
-  max-width: 280px;
-}
-
-.search-field :deep(.v-field) {
-  font-size: 14px;
-}
-
-.filter-btn {
-  text-transform: none;
-  font-size: 13px;
-}
-
 .table-card {
   border: 0;
   overflow: hidden;
@@ -1882,7 +1671,6 @@ async function submitAuthorize() {
 }
 
 .design-pos-left,
-.design-order-left,
 .design-history-left,
 .design-funding-left {
   display: flex;
@@ -1902,8 +1690,7 @@ async function submitAuthorize() {
 .design-pos-title-col,
 .design-order-tags,
 .design-pos-tags,
-.design-history-bottom,
-.design-withdraw-tags {
+.design-history-bottom {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -2003,16 +1790,6 @@ async function submitAuthorize() {
   white-space: nowrap;
 }
 
-.order-side-pill,
-.order-outcome-pill,
-.withdraw-chain-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 700;
-}
-
 .order-side-pill {
   height: 22px;
   border-radius: 6px;
@@ -2025,12 +1802,6 @@ async function submitAuthorize() {
   padding: 0 8px;
 }
 
-.withdraw-chain-pill {
-  height: 22px;
-  border-radius: 8px;
-  padding: 0 10px;
-}
-
 .side-buy,
 .side-sell {
   color: #374151;
@@ -2141,11 +1912,6 @@ async function submitAuthorize() {
   gap: 12px;
 }
 
-.withdraw-chain-pill {
-  background: #f8fafc;
-  color: #334155;
-}
-
 .design-withdraw-date {
   font-size: 14px;
   font-weight: 600;
@@ -2165,45 +1931,6 @@ async function submitAuthorize() {
   padding-top: 6px;
 }
 
-.positions-table,
-.wallet-table {
-  font-size: 14px;
-}
-
-.wallet-table th,
-.positions-table th {
-  font-size: 11px;
-  font-weight: 600;
-  color: #6b7280;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-  padding: 12px 16px;
-}
-
-.th-icon {
-  vertical-align: middle;
-  margin-left: 2px;
-  color: #9ca3af;
-}
-
-.positions-table td,
-.wallet-table td {
-  padding: 12px 16px;
-  color: #374151;
-}
-
-.cell-market {
-  max-width: 320px;
-  word-break: break-word;
-}
-
-/* 持仓行：市场图标 + 标题 + 标签 + 份额 */
-.position-market-cell {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-}
-
 .position-icon {
   width: 40px;
   height: 40px;
@@ -2236,25 +1963,6 @@ async function submitAuthorize() {
   border-radius: inherit;
 }
 
-.position-market-info {
-  min-width: 0;
-}
-
-.position-market-title {
-  display: block;
-  font-weight: 500;
-  color: #111827;
-  margin-bottom: 6px;
-  line-height: 1.3;
-}
-
-.position-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
 .position-outcome-pill {
   font-size: 12px;
   padding: 2px 8px;
@@ -2268,19 +1976,6 @@ async function submitAuthorize() {
   color: #374151;
 }
 
-.position-shares {
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.cell-avg-now {
-  white-space: nowrap;
-}
-
-.cell-value {
-  vertical-align: top;
-}
-
 .position-value {
   font-weight: 500;
   color: #111827;
@@ -2296,26 +1991,6 @@ async function submitAuthorize() {
   color: #6b7280;
 }
 
-.cell-actions {
-  white-space: nowrap;
-}
-
-.position-row .cell-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 4px;
-}
-
-.position-sell-btn {
-  text-transform: none;
-  font-weight: 600;
-}
-
-.position-share-btn {
-  color: #6b7280;
-}
-
 /* 移动端持仓可折叠列表 */
 .positions-mobile-list {
   padding: 0;
@@ -2343,16 +2018,6 @@ async function submitAuthorize() {
   background-color: #fafafa;
 }
 
-.position-mobile-card.expanded {
-  background-color: #f9fafb;
-}
-
-.position-mobile-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-}
-
 .position-mobile-card .position-icon {
   width: 40px;
   height: 40px;
@@ -2360,11 +2025,6 @@ async function submitAuthorize() {
   flex-shrink: 0;
 }
 
-.position-mobile-main {
-  flex: 1;
-  min-width: 0;
-}
-
 .design-pos-title-col :deep(.position-mobile-title) {
   font-size: 14px;
   font-weight: 500;
@@ -2373,68 +2033,6 @@ async function submitAuthorize() {
   margin-bottom: 4px;
 }
 
-.position-mobile-sub {
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.position-mobile-right {
-  text-align: right;
-  flex-shrink: 0;
-}
-
-.position-mobile-right .position-value {
-  font-size: 15px;
-  font-weight: 600;
-  color: #111827;
-}
-
-.position-mobile-right .position-value-change {
-  font-size: 12px;
-  margin-top: 2px;
-}
-
-.position-mobile-expanded {
-  margin-top: 14px;
-  padding-top: 14px;
-  border-top: 1px solid #e5e7eb;
-}
-
-.position-mobile-avg-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 13px;
-  color: #6b7280;
-  margin-bottom: 12px;
-}
-
-.avg-now-label {
-  font-weight: 500;
-}
-
-.avg-now-values {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.avg-now-arrow {
-  vertical-align: middle;
-}
-
-.position-mobile-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  justify-content: flex-end;
-}
-
-.position-mobile-actions .position-sell-btn {
-  text-transform: none;
-  font-weight: 600;
-}
-
 /* 移动端挂单列表 */
 .orders-mobile-list {
   padding: 0;
@@ -2492,25 +2090,6 @@ async function submitAuthorize() {
   margin-bottom: 4px;
 }
 
-.order-mobile-action {
-  font-size: 13px;
-  font-weight: 500;
-  margin-bottom: 2px;
-}
-
-.order-mobile-price {
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.order-mobile-right {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
 .order-cancel-icon {
   grid-column: 3;
   justify-self: end;
@@ -2525,26 +2104,6 @@ async function submitAuthorize() {
   padding: 0;
 }
 
-.order-mobile-filled {
-  font-size: 13px;
-  font-weight: 500;
-  color: #111827;
-}
-
-.order-mobile-expiry {
-  font-size: 11px;
-  color: #9ca3af;
-  white-space: nowrap;
-}
-
-.filter-btn-cancel {
-  color: #6b7280;
-}
-
-.filter-btn-cancel .v-icon {
-  color: inherit;
-}
-
 /* 移动端历史列表 */
 .history-mobile-list {
   padding: 0;
@@ -2572,16 +2131,6 @@ async function submitAuthorize() {
   background-color: #fafafa;
 }
 
-.history-mobile-card.expanded {
-  background-color: #f9fafb;
-}
-
-.history-mobile-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-}
-
 .history-mobile-icon {
   width: 40px;
   height: 40px;
@@ -2613,14 +2162,6 @@ async function submitAuthorize() {
   color: #6b7280;
 }
 
-.history-mobile-right {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 2px;
-  flex-shrink: 0;
-}
-
 .history-mobile-pl {
   font-size: 14px;
   font-weight: 600;
@@ -2631,63 +2172,13 @@ async function submitAuthorize() {
   color: #111827;
 }
 
-.history-mobile-time {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.history-chevron {
-  color: #9ca3af;
-  flex-shrink: 0;
-  align-self: center;
-}
-
-.history-mobile-expanded {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid #e5e7eb;
-}
-
-.history-mobile-detail-row {
-  display: flex;
-  gap: 16px;
-  font-size: 13px;
-  color: #6b7280;
-  margin-bottom: 10px;
-}
-
-.history-detail-label {
-  font-weight: 500;
-}
-
-.history-mobile-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  justify-content: flex-end;
-}
-
-.history-view-btn {
-  text-transform: none;
-  font-weight: 500;
-}
-
-.filter-btn-close-losses {
-  color: #6b7280;
-}
-
-.side-yes,
-.side-no {
-  color: #374151;
-  font-weight: 500;
-}
-
 .empty-cell {
   text-align: center;
   color: #6b7280;
   padding: 48px 16px !important;
   font-size: 14px;
 }
+
 .empty-cell--loading {
   display: flex;
   flex-direction: column;
@@ -2702,36 +2193,14 @@ async function submitAuthorize() {
   flex-direction: column;
   padding: 0;
 }
+
 .withdrawal-mobile-card {
   padding: 12px 16px;
   border-radius: 8px;
   background: #f9fafb;
   border: 1px solid #e5e7eb;
 }
-.withdrawal-mobile-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-.withdrawal-mobile-main {
-  min-width: 0;
-}
-.withdrawal-mobile-amount {
-  font-weight: 600;
-  font-size: 16px;
-  color: #111827;
-}
-.withdrawal-mobile-meta {
-  font-size: 12px;
-  color: #6b7280;
-  margin-top: 4px;
-}
-.withdrawal-mobile-reason {
-  font-size: 12px;
-  color: #6b7280;
-  margin-top: 8px;
-}
+
 .withdrawal-status-pill {
   font-size: 12px;
   font-weight: 500;
@@ -2739,6 +2208,7 @@ async function submitAuthorize() {
   border-radius: 999px;
   flex-shrink: 0;
 }
+
 .withdrawal-status-pill.status-pending,
 .withdrawal-status-pill.status-failed {
   background: #f3f4f6;
@@ -2800,11 +2270,7 @@ async function submitAuthorize() {
   overflow-wrap: anywhere;
   text-align: center;
 }
-.withdrawal-reason {
-  font-size: 12px;
-  color: #6b7280;
-  margin-top: 4px;
-}
+
 .withdrawal-mobile-address {
   font-size: 12px;
   color: #6b7280;
@@ -2915,10 +2381,6 @@ async function submitAuthorize() {
   padding: 0;
   gap: 10px;
 }
-.cell-address {
-  font-family: monospace;
-  font-size: 13px;
-}
 
 .pagination-bar {
   display: flex;