From 7b076aa4f244a522e2c47499b3c05c86ae4f4774 Mon Sep 17 00:00:00 2001
From: ivan <ivan@qq.com>
Date: Fri, 20 Mar 2026 17:04:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E9=92=B1=E5=8C=85?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2UI=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Wallet.vue | 1717 ++++++++++++++++++++++++++----------------
 1 file changed, 1065 insertions(+), 652 deletions(-)

diff --git a/src/views/Wallet.vue b/src/views/Wallet.vue
index 13359aa..a466410 100644
--- a/src/views/Wallet.vue
+++ b/src/views/Wallet.vue
@@ -1,638 +1,348 @@
 <template>
   <v-container class="wallet-container">
-    <!-- 顶部：Portfolio + Profit/Loss 卡片 -->
-    <v-row class="wallet-cards">
-      <v-col cols="12" md="6">
-        <v-card class="wallet-card portfolio-card" elevation="0" rounded="lg">
-          <div class="card-header">
-            <span class="card-title">
-              {{ t('wallet.portfolio') }}
-              <v-icon size="16" class="title-icon">mdi-eye-off-outline</v-icon>
-            </span>
-            <div class="balance-badge">
-              <v-icon size="14">mdi-sack</v-icon>
-              <span>${{ portfolioBalance }}</span>
-            </div>
-          </div>
-          <div class="card-value">${{ portfolioBalance }}</div>
-          <div class="card-timeframe">{{ t('wallet.today') }}</div>
-          <div class="card-actions">
-            <v-btn
-              color="primary"
-              variant="flat"
-              class="action-btn"
-              prepend-icon="mdi-arrow-down"
-              @click="depositDialogOpen = true"
-            >
-              {{ t('wallet.deposit') }}
-            </v-btn>
-            <v-btn
-              variant="outlined"
-              color="grey"
-              class="action-btn"
-              prepend-icon="mdi-arrow-up"
-              @click="withdrawDialogOpen = true"
-            >
-              {{ t('wallet.withdraw') }}
-            </v-btn>
-            <!-- <v-btn
-              variant="outlined"
-              color="grey"
-              class="action-btn"
-              prepend-icon="mdi-shield-check-outline"
-              @click="onAuthorizeClick"
-            >
-              {{ t('wallet.authorize') }}
-            </v-btn> -->
-          </div>
-        </v-card>
-      </v-col>
-      <v-col cols="12" md="6">
-        <v-card class="wallet-card pl-card" elevation="0" rounded="lg">
-          <div class="card-header">
-            <span class="card-title">
-              <v-icon size="16" color="success">mdi-triangle-small-up</v-icon>
-              {{ t('wallet.profitLoss') }}
-            </span>
-            <div class="pl-tabs">
-              <v-btn
-                v-for="tr in plTimeRanges"
-                :key="tr.value"
-                :variant="plRange === tr.value ? 'flat' : 'text'"
-                :color="plRange === tr.value ? 'primary' : undefined"
-                size="small"
-                class="pl-tab"
-                @click="plRange = tr.value"
-              >
-                {{ tr.label }}
-              </v-btn>
-            </div>
-          </div>
-          <div class="card-value-row">
-            <span class="card-value">${{ profitLoss }}</span>
-            <v-icon size="18" class="info-icon">mdi-information-outline</v-icon>
-          </div>
-          <div class="card-timeframe">{{ t('wallet.allTime') }}</div>
-          <div ref="plChartRef" class="pl-chart"></div>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <!-- 未结算汇总：单条展示，多条用 +N，结算按钮不显示图标 -->
-    <v-row v-if="unsettledCount > 0" class="wallet-settlement-row">
-      <v-col cols="12">
-        <v-card class="settlement-card" 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>
-            </div>
-            <v-btn
-              color="primary"
-              variant="flat"
-              class="settlement-claim-btn"
-              :loading="claimLoading"
-              :disabled="claimLoading"
-              @click="onClaimSettlement"
-            >
-              {{ t('wallet.claim') }}
-            </v-btn>
-          </div>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <!-- 下方：Positions / Open orders / History -->
-    <div class="wallet-section">
-      <v-tabs v-model="activeTab" class="wallet-tabs" density="comfortable">
-        <v-tab value="positions">{{ t('wallet.positions') }}</v-tab>
-        <v-tab value="orders">{{ t('wallet.openOrders') }}</v-tab>
-        <v-tab value="history">{{ t('wallet.history') }}</v-tab>
-        <v-tab value="withdrawals">{{ t('wallet.withdrawals') }}</v-tab>
-      </v-tabs>
-      <div class="toolbar">
-        <v-text-field
-          v-model="search"
-          :placeholder="t('wallet.searchPlaceholder')"
-          density="compact"
-          hide-details
+    <div class="wallet-mobile-frame">
+      <div class="wallet-mobile-header">{{ t('wallet.walletTitle') }}</div>
+      <v-card class="wallet-card portfolio-card design-tu-asset" elevation="0" rounded="lg">
+        <div class="card-header">
+          <span class="card-title">{{ t('wallet.portfolio') }}</span>
+        </div>
+        <div class="card-value">${{ portfolioBalance }}</div>
+      </v-card>
+      <div class="card-actions design-tu-actions">
+        <v-btn
+          color="default"
           variant="outlined"
-          rounded
-          class="search-field"
-          prepend-inner-icon="mdi-magnify"
-        />
-        <template v-if="activeTab === 'history'">
-          <v-btn
-            v-if="mobile"
-            variant="outlined"
-            size="small"
-            class="filter-btn filter-btn-close-losses"
-            @click="closeLosses"
-          >
-            <v-icon size="18">mdi-delete-outline</v-icon>
-            {{ t('wallet.closeLosses') }}
-          </v-btn>
-          <v-btn variant="outlined" size="small" class="filter-btn">
-            <v-icon size="18">mdi-filter</v-icon>
-            {{ t('wallet.all') }}
-          </v-btn>
-          <v-btn variant="outlined" size="small" class="filter-btn">
-            <v-icon size="18">mdi-sort</v-icon>
-            {{ t('wallet.newest') }}
-          </v-btn>
-          <v-btn variant="outlined" size="small" class="filter-btn" icon>
-            <v-icon size="18">mdi-calendar</v-icon>
-          </v-btn>
-          <v-btn variant="outlined" size="small" class="filter-btn">
-            <v-icon size="18">mdi-download</v-icon>
-            {{ t('wallet.export') }}
-          </v-btn>
-        </template>
-        <template v-else-if="activeTab === 'positions'">
-          <v-btn variant="outlined" size="small" class="filter-btn">
-            <v-icon size="18">mdi-filter</v-icon>
-            {{ t('wallet.currentValue') }}
-          </v-btn>
-        </template>
-        <template v-else-if="activeTab === 'withdrawals'">
-          <v-btn
-            v-for="opt in withdrawStatusOptions"
-            :key="opt.value"
-            :variant="withdrawStatusFilter === opt.value ? 'flat' : 'outlined'"
-            :color="withdrawStatusFilter === opt.value ? 'primary' : undefined"
-            size="small"
-            class="filter-btn"
-            @click="withdrawStatusFilter = opt.value"
-          >
-            {{ opt.label }}
-          </v-btn>
-        </template>
-        <template v-else-if="activeTab === 'orders'">
-          <v-btn variant="outlined" size="small" class="filter-btn">
-            <v-icon size="18">mdi-filter</v-icon>
-            {{ t('wallet.market') }}
-          </v-btn>
-          <v-btn
-            variant="outlined"
-            size="small"
-            class="filter-btn filter-btn-cancel"
-            @click="cancelAllOrders"
-          >
-            <v-icon size="18">mdi-close</v-icon>
-            {{ t('wallet.cancelAll') }}
-          </v-btn>
-        </template>
-        <v-btn v-else variant="outlined" size="small" class="filter-btn">
-          <v-icon size="18">mdi-filter</v-icon>
-          {{ t('wallet.market') }}
+          class="action-btn design-tu-action"
+          @click="depositDialogOpen = true"
+        >
+          {{ t('wallet.deposit') }}
+        </v-btn>
+        <v-btn
+          color="default"
+          variant="outlined"
+          class="action-btn design-tu-action"
+          @click="withdrawDialogOpen = true"
+        >
+          {{ t('wallet.withdraw') }}
         </v-btn>
       </div>
-      <v-card class="table-card" elevation="0" rounded="lg">
-        <!-- 持仓：桌面端表格 / 移动端可折叠列表 -->
-        <template v-if="activeTab === 'positions'">
-          <!-- 移动端：可折叠列表 -->
-          <div v-if="mobile" class="positions-mobile-list">
-            <template v-if="positionLoading">
-              <div class="empty-cell">{{ t('common.loading') }}</div>
-            </template>
-            <template v-else-if="filteredPositions.length === 0">
-              <div class="empty-cell">{{ t('wallet.noPositionsFound') }}</div>
-            </template>
-            <div
-              v-for="pos in paginatedPositions"
-              :key="pos.id"
-              class="position-mobile-card"
-              :class="{ expanded: expandedPositionId === pos.id }"
-              @click="togglePositionExpanded(pos.id)"
+
+      <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
             >
-              <div class="position-mobile-row">
-                <div class="position-icon" :class="pos.iconClass">
-                  <img v-if="pos.imageUrl" :src="pos.imageUrl" alt="" class="position-icon-img" />
-                  <v-icon v-else-if="pos.icon" size="20" class="position-icon-svg">{{ pos.icon }}</v-icon>
-                  <span v-else class="position-icon-char">{{ pos.iconChar || '•' }}</span>
-                </div>
-                <div class="position-mobile-main">
-                  <div class="position-mobile-title">{{ pos.market }}</div>
-                  <div class="position-mobile-sub">
-                    {{ pos.bet }} on {{ pos.outcomeWord || pos.sellOutcome || 'Position' }} to win
-                    {{ pos.toWin }}
-                  </div>
-                </div>
-                <div class="position-mobile-right">
-                  <div class="position-value">{{ pos.value }}</div>
-                  <div
-                    v-if="pos.valueChange != null"
-                    :class="[
-                      'position-value-change',
-                      pos.valueChangeLoss ? 'value-loss' : 'value-gain',
-                    ]"
-                  >
-                    {{ pos.valueChange
-                    }}{{ pos.valueChangePct != null ? ` (${pos.valueChangePct})` : '' }}
-                  </div>
-                </div>
-              </div>
-              <!-- 展开内容：AVG • NOW + 操作按钮 -->
-              <div
-                v-show="expandedPositionId === pos.id"
-                class="position-mobile-expanded"
-                @click.stop
-              >
-                <div class="position-mobile-avg-row">
-                  <span class="avg-now-label">AVG • NOW</span>
-                  <span class="avg-now-values">
-                    <template v-if="parseAvgNow(pos.avgNow)[1]">
-                      {{ parseAvgNow(pos.avgNow)[0] }}
-                      <v-icon
-                        v-if="pos.valueChangeLoss"
-                        size="14"
-                        color="error"
-                        class="avg-now-arrow"
-                        >mdi-chevron-down</v-icon
-                      >
-                      <v-icon v-else size="14" color="success" class="avg-now-arrow"
-                        >mdi-chevron-up</v-icon
-                      >
-                      {{ parseAvgNow(pos.avgNow)[1] }}
-                    </template>
-                    <template v-else>{{ pos.avgNow }}</template>
-                  </span>
-                </div>
-                <div class="position-mobile-actions">
-                  <v-btn
-                    color="primary"
-                    variant="flat"
-                    size="small"
-                    class="position-sell-btn"
-                    @click="sellPosition(pos.id)"
-                    >{{ t('trade.sell') }}</v-btn
-                  >
-                  <v-btn
-                    icon
-                    variant="text"
-                    size="small"
-                    class="position-share-btn"
-                    @click="sharePosition(pos.id)"
-                  >
-                    <v-icon size="18">mdi-share-variant</v-icon>
-                  </v-btn>
-                </div>
-              </div>
-            </div>
           </div>
-          <!-- 桌面端：表格 -->
-          <v-table v-else class="wallet-table positions-table-full">
-            <thead>
-              <tr>
-                <th class="text-left">{{ t('wallet.market') }}</th>
-                <th class="text-left">
-                  {{ t('wallet.avgNow') }}
-                  <v-icon size="14" class="th-icon">mdi-information-outline</v-icon>
-                </th>
-                <th class="text-left">{{ t('wallet.bet') }}</th>
-                <th class="text-left">{{ t('wallet.toWin') }}</th>
-                <th class="text-left">
-                  {{ t('wallet.value') }}
-                  <v-icon size="14" class="th-icon">mdi-chevron-down</v-icon>
-                </th>
-                <th class="text-right">{{ t('wallet.action') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-if="positionLoading">
-                <td colspan="6" class="empty-cell">{{ t('common.loading') }}</td>
-              </tr>
-              <tr v-else-if="filteredPositions.length === 0">
-                <td colspan="6" class="empty-cell">{{ t('wallet.noPositionsFound') }}</td>
-              </tr>
-              <tr v-for="pos in paginatedPositions" :key="pos.id" class="position-row">
-                <td class="cell-market">
-                  <div class="position-market-cell">
+          <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>
+      </v-card>
+
+      <!-- 下方：Positions / Open orders / History -->
+      <div class="wallet-section">
+        <v-tabs v-model="activeTab" class="wallet-tabs" density="comfortable">
+          <v-tab value="positions">{{ t('wallet.positions') }}</v-tab>
+          <v-tab value="orders">{{ t('wallet.openOrders') }}</v-tab>
+          <v-tab value="history">{{ t('wallet.history') }}</v-tab>
+          <v-tab value="withdrawals">{{ t('wallet.withdrawals') }}</v-tab>
+        </v-tabs>
+        <v-card class="table-card wallet-design-card" elevation="0" rounded="lg">
+          <template v-if="activeTab === 'positions'">
+            <div class="positions-mobile-list">
+              <div v-if="positionLoading" class="empty-cell">{{ t('common.loading') }}</div>
+              <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 class="design-pos-top">
+                  <div class="design-pos-left">
                     <div class="position-icon" :class="pos.iconClass">
-                      <img v-if="pos.imageUrl" :src="pos.imageUrl" alt="" class="position-icon-img" />
-                      <v-icon v-else-if="pos.icon" size="20" class="position-icon-svg">{{ pos.icon }}</v-icon>
+                      <img
+                        v-if="pos.imageUrl"
+                        :src="pos.imageUrl"
+                        alt=""
+                        class="position-icon-img"
+                      />
+                      <v-icon v-else-if="pos.icon" size="20" class="position-icon-svg">{{
+                        pos.icon
+                      }}</v-icon>
                       <span v-else class="position-icon-char">{{ pos.iconChar || '•' }}</span>
                     </div>
-                    <div class="position-market-info">
-                      <span class="position-market-title">{{ pos.market }}</span>
-                      <div class="position-meta">
+                    <div class="design-pos-title-col">
+                    <div class="position-mobile-title marquee-container">
+                      <div class="marquee-track">
+                        <span>{{ pos.market }}</span>
+                        <span aria-hidden="true">{{ pos.market }}</span>
+                      </div>
+                    </div>
+                      <div class="design-pos-tags">
                         <span
                           v-if="pos.outcomeTag"
                           class="position-outcome-pill"
-                          :class="pos.outcomePillClass"
-                          >{{ pos.outcomeTag }}</span
+                          :class="getOutcomeClass(pos.outcomeTag, pos.outcomePillClass)"
                         >
-                        <span class="position-shares">{{ pos.shares }}</span>
+                          {{ pos.outcomeTag }}
+                        </span>
                       </div>
                     </div>
                   </div>
-                </td>
-                <td class="cell-avg-now">{{ pos.avgNow }}</td>
-                <td>{{ pos.bet }}</td>
-                <td>{{ pos.toWin }}</td>
-                <td class="cell-value">
-                  <div class="position-value">{{ pos.value }}</div>
-                  <div
-                    v-if="pos.valueChange != null"
-                    :class="[
-                      'position-value-change',
-                      pos.valueChangeLoss ? 'value-loss' : 'value-gain',
-                    ]"
-                  >
-                    {{ pos.valueChange
-                    }}{{ pos.valueChangePct != null ? ` (${pos.valueChangePct})` : '' }}
+                  <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',
+                      ]"
+                    >
+                      {{ pos.valueChange
+                      }}{{ pos.valueChangePct != null ? ` (${pos.valueChangePct})` : '' }}
+                    </div>
+                  </div>
+                </div>
+                <div class="design-pos-stats">
+                  <div class="design-pos-stat">
+                    <div class="design-pos-stat-label">{{ t('wallet.sharesLabel') }}</div>
+                    <div class="design-pos-stat-value">{{ pos.shares }}</div>
+                  </div>
+                  <div class="design-pos-stat">
+                    <div class="design-pos-stat-label">{{ t('wallet.avgPriceLabel') }}</div>
+                    <div class="design-pos-stat-value">{{ parseAvgNow(pos.avgNow)[0] }}</div>
+                  </div>
+                  <div class="design-pos-stat">
+                    <div class="design-pos-stat-label">{{ t('wallet.currentPriceLabel') }}</div>
+                    <div class="design-pos-stat-value">
+                      {{ parseAvgNow(pos.avgNow)[1] || parseAvgNow(pos.avgNow)[0] }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-else-if="activeTab === 'orders'">
+            <div class="orders-mobile-list">
+              <div v-if="openOrderLoading" class="empty-cell">{{ t('common.loading') }}</div>
+              <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 class="design-order-top">
+                  <div class="order-mobile-icon" :class="ord.iconClass">
+                    <span class="position-icon-char">{{ ord.iconChar || '•' }}</span>
+                  </div>
+                  <div class="order-mobile-main design-order-title-col">
+                    <div class="order-mobile-title marquee-container order-title-marquee">
+                      <div class="marquee-track">
+                        <span>{{ getOrderDisplayTitle(ord) }}</span>
+                        <span aria-hidden="true">{{ getOrderDisplayTitle(ord) }}</span>
+                      </div>
+                    </div>
+                    <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>
+                    </div>
                   </div>
-                </td>
-                <td class="text-right cell-actions">
-                  <v-btn
-                    color="primary"
-                    variant="flat"
-                    size="small"
-                    class="position-sell-btn"
-                    @click="sellPosition(pos.id)"
-                    >{{ t('trade.sell') }}</v-btn
-                  >
                   <v-btn
                     icon
                     variant="text"
                     size="small"
-                    class="position-share-btn"
-                    @click="sharePosition(pos.id)"
+                    class="order-cancel-icon"
+                    :disabled="cancelOrderLoading || ord.fullyFilled"
+                    @click.stop="cancelOrder(ord)"
                   >
-                    <v-icon size="18">mdi-share-variant</v-icon>
+                    <v-icon size="20">mdi-close</v-icon>
                   </v-btn>
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-        </template>
-        <!-- 未成交：移动端卡片列表 / 桌面端表格 -->
-        <template v-else-if="activeTab === 'orders'">
-          <!-- 移动端：挂单卡片列表 -->
-          <div v-if="mobile" class="orders-mobile-list">
-            <template v-if="openOrderLoading">
-              <div class="empty-cell">{{ t('common.loading') }}</div>
-            </template>
-            <template v-else-if="filteredOpenOrders.length === 0">
-              <div class="empty-cell">{{ t('wallet.noOpenOrdersFound') }}</div>
-            </template>
-            <div v-for="ord in paginatedOpenOrders" :key="ord.id" class="order-mobile-card">
-              <div class="order-mobile-icon" :class="ord.iconClass">
-                <span class="position-icon-char">{{ ord.iconChar }}</span>
-              </div>
-              <div class="order-mobile-main">
-                <div class="order-mobile-title">{{ ord.market }}</div>
-                <div
-                  class="order-mobile-action"
-                  :class="ord.side === 'Yes' ? 'side-yes' : 'side-no'"
-                >
-                  {{ ord.actionLabel || `Buy ${ord.outcome}` }}
                 </div>
-                <div class="order-mobile-price">{{ ord.price }} • {{ ord.total }}</div>
-              </div>
-              <div class="order-mobile-right">
-                <v-btn
-                  icon
-                  variant="text"
-                  size="small"
-                  class="order-cancel-icon"
-                  color="error"
-                  :disabled="cancelOrderLoading || ord.fullyFilled"
-                  @click.stop="cancelOrder(ord)"
-                >
-                  <v-icon size="20">mdi-close</v-icon>
-                </v-btn>
-                <div class="order-mobile-filled">{{ ord.filledDisplay || ord.filled }}</div>
-                <div class="order-mobile-expiry">{{ t('wallet.expirationLabel') }} {{ ord.expiration }}</div>
+                <div class="design-order-stats">
+                  <div class="design-order-stat">
+                    <div class="design-order-stat-label">{{ t('wallet.openOrderPriceLabel') }}</div>
+                    <div class="design-order-stat-value">{{ ord.price }}</div>
+                  </div>
+                  <div class="design-order-stat">
+                    <div class="design-order-stat-label">{{ t('wallet.filledTotalLabel') }}</div>
+                    <div class="design-order-stat-value">
+                      {{ ord.filledDisplay || `${ord.filled}/${ord.total}` }}
+                    </div>
+                  </div>
+                  <div class="design-order-stat">
+                    <div class="design-order-stat-label">{{ t('wallet.orderValueLabel') }}</div>
+                    <div class="design-order-stat-value" :class="getOrderValueClass(ord)">
+                      {{ getOrderValueDisplay(ord) }}
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-          <!-- 桌面端：表格 -->
-          <v-table v-else class="wallet-table">
-            <thead>
-              <tr>
-                <th class="text-left">{{ t('wallet.market') }}</th>
-                <th class="text-left">{{ t('wallet.side') }}</th>
-                <th class="text-left">{{ t('wallet.outcome') }}</th>
-                <th class="text-left">{{ t('wallet.price') }}</th>
-                <th class="text-left">{{ t('wallet.filled') }}</th>
-                <th class="text-left">{{ t('wallet.total') }}</th>
-                <th class="text-left">{{ t('wallet.expiration') }}</th>
-                <th class="text-right">{{ t('wallet.action') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-if="openOrderLoading">
-                <td colspan="8" class="empty-cell">{{ t('common.loading') }}</td>
-              </tr>
-              <tr v-else-if="filteredOpenOrders.length === 0">
-                <td colspan="8" class="empty-cell">{{ t('wallet.noOpenOrdersFound') }}</td>
-              </tr>
-              <tr v-for="ord in paginatedOpenOrders" :key="ord.id">
-                <td class="cell-market">{{ ord.market }}</td>
-                <td>
-                  <span :class="ord.side === 'Yes' ? 'side-yes' : 'side-no'">{{ ord.side }}</span>
-                </td>
-                <td>{{ ord.outcome }}</td>
-                <td>{{ ord.price }}</td>
-                <td>{{ ord.filled }}</td>
-                <td>{{ ord.total }}</td>
-                <td>{{ ord.expiration }}</td>
-                <td class="text-right">
-                  <v-btn
-                    variant="text"
-                    size="small"
-                    color="error"
-                    :disabled="cancelOrderLoading || ord.fullyFilled"
-                    @click="cancelOrder(ord)"
-                    >Cancel</v-btn
-                  >
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-        </template>
-        <!-- 历史记录：移动端可展开列表 / 桌面端表格 -->
-        <template v-else-if="activeTab === 'history'">
-          <!-- 移动端：历史卡片列表 -->
-          <div v-if="mobile" class="history-mobile-list">
-            <template v-if="historyLoading">
-              <div class="empty-cell">{{ t('common.loading') }}</div>
-            </template>
-            <template v-else-if="filteredHistory.length === 0">
-              <div class="empty-cell">{{ t('wallet.noHistoryFound') }}</div>
-            </template>
-            <div
-              v-for="h in paginatedHistory"
-              :key="h.id"
-              class="history-mobile-card"
-              :class="{ expanded: expandedHistoryId === h.id }"
-              @click="toggleHistoryExpanded(h.id)"
-            >
-              <div class="history-mobile-row">
-                <div class="history-mobile-icon" :class="h.iconClass">
-                  <img v-if="h.imageUrl" :src="h.imageUrl" alt="" class="position-icon-img" />
-                  <span v-else class="position-icon-char">{{ h.iconChar || '•' }}</span>
-                </div>
-                <div class="history-mobile-main">
-                  <div class="history-mobile-title">{{ h.market }}</div>
-                  <div class="history-mobile-activity">{{ h.activityDetail || h.activity }}</div>
-                </div>
-                <div class="history-mobile-right">
+          </template>
+          <template v-else-if="activeTab === 'history'">
+            <div class="history-mobile-list">
+              <div v-if="historyLoading" class="empty-cell">{{ t('common.loading') }}</div>
+              <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'"
+              >
+                <template v-if="!isFundingHistory(h)">
+                  <div class="design-history-top">
+                    <div class="design-history-left">
+                      <div class="history-mobile-icon" :class="h.iconClass">
+                        <img v-if="h.imageUrl" :src="h.imageUrl" alt="" class="position-icon-img" />
+                        <span v-else class="position-icon-char">{{ h.iconChar || '•' }}</span>
+                      </div>
+                      <div class="history-mobile-main">
+                        <div class="history-mobile-title marquee-container history-title-marquee">
+                          <div class="marquee-track">
+                            <span>{{ h.market }}</span>
+                            <span aria-hidden="true">{{ h.market }}</span>
+                          </div>
+                        </div>
+                        <div class="history-mobile-activity">
+                          {{ h.timeAgo || h.activityDetail || h.activity }}
+                        </div>
+                      </div>
+                    </div>
+                    <span
+                      :class="['history-mobile-pl', h.profitLossNegative ? 'pl-loss' : 'pl-gain']"
+                    >
+                      {{ h.profitLoss ?? h.value }}
+                    </span>
+                  </div>
+                  <div class="design-history-bottom">
+                    <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
+                    >
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="design-funding-left">
+                    <div class="history-mobile-icon" :class="getFundingIconClass(h)">
+                      <img v-if="h.imageUrl" :src="h.imageUrl" alt="" class="position-icon-img" />
+                      <span v-else class="position-icon-char">{{ getFundingIconText(h) }}</span>
+                    </div>
+                    <div class="history-mobile-main">
+                      <div class="history-mobile-title marquee-container history-title-marquee">
+                        <div class="marquee-track">
+                          <span>{{ getFundingTitle(h) }}</span>
+                          <span aria-hidden="true">{{ getFundingTitle(h) }}</span>
+                        </div>
+                      </div>
+                      <div class="history-mobile-activity">{{ h.timeAgo || '—' }}</div>
+                    </div>
+                  </div>
                   <span
-                    :class="['history-mobile-pl', h.profitLossNegative ? 'pl-loss' : 'pl-gain']"
+                    :class="[
+                      'history-mobile-pl',
+                      isWithdrawalHistory(h) || h.profitLossNegative ? 'pl-loss' : 'pl-gain',
+                    ]"
                   >
                     {{ h.profitLoss ?? h.value }}
                   </span>
-                  <div class="history-mobile-time">{{ h.timeAgo || '' }}</div>
-                </div>
-                <v-icon size="20" class="history-chevron">
-                  {{ expandedHistoryId === h.id ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
-                </v-icon>
-              </div>
-              <div v-show="expandedHistoryId === h.id" class="history-mobile-expanded" @click.stop>
-                <div class="history-mobile-detail-row">
-                  <span v-if="h.avgPrice" class="history-detail-label">AVG {{ h.avgPrice }}</span>
-                  <span v-if="h.shares" class="history-detail-label">SHARES {{ h.shares }}</span>
-                </div>
-                <div class="history-mobile-actions">
-                  <v-btn
-                    variant="outlined"
-                    size="small"
-                    class="history-view-btn"
-                    @click="viewHistory(h.id)"
-                    >{{ t('wallet.view') }}</v-btn
-                  >
-                  <v-btn
-                    icon
-                    variant="text"
-                    size="small"
-                    class="position-share-btn"
-                    @click="shareHistory(h.id)"
-                  >
-                    <v-icon size="18">mdi-open-in-new</v-icon>
-                  </v-btn>
-                </div>
+                </template>
               </div>
             </div>
-          </div>
-          <!-- 桌面端：表格 -->
-          <v-table v-else class="wallet-table">
-            <thead>
-              <tr>
-                <th class="text-left">{{ t('wallet.activity') }}</th>
-                <th class="text-left">{{ t('wallet.market') }}</th>
-                <th class="text-left">{{ t('wallet.value') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-if="historyLoading">
-                <td colspan="3" class="empty-cell">{{ t('common.loading') }}</td>
-              </tr>
-              <tr v-else-if="filteredHistory.length === 0">
-                <td colspan="3" class="empty-cell">{{ t('wallet.noHistoryFound') }}</td>
-              </tr>
-              <tr v-for="h in paginatedHistory" :key="h.id">
-                <td>
-                  <span :class="h.side === 'Yes' ? 'side-yes' : 'side-no'">{{ h.activity }}</span>
-                </td>
-                <td class="cell-market">{{ h.market }}</td>
-                <td>{{ h.value }}</td>
-              </tr>
-            </tbody>
-          </v-table>
-        </template>
-        <!-- 提现记录：分页列表 -->
-        <template v-else-if="activeTab === 'withdrawals'">
-          <div v-if="mobile" class="withdrawals-mobile-list">
-            <template v-if="withdrawalsLoading">
-              <div class="empty-cell">{{ t('common.loading') }}</div>
-            </template>
-            <template v-else-if="withdrawalsList.length === 0">
-              <div class="empty-cell">{{ t('wallet.noWithdrawalsFound') }}</div>
-            </template>
-            <div
-              v-for="w in withdrawalsList"
-              :key="String(w.ID ?? w.requestNo ?? '')"
-              class="withdrawal-mobile-card"
-            >
-              <div class="withdrawal-mobile-row">
-                <div class="withdrawal-mobile-main">
-                  <div class="withdrawal-mobile-amount">${{ formatWithdrawAmount(w.amount) }}</div>
-                  <div class="withdrawal-mobile-meta">
-                    {{ w.chain || '—' }} · {{ formatWithdrawTime(w.CreatedAt ?? w.createdAt) }}
+          </template>
+          <template v-else-if="activeTab === 'withdrawals'">
+            <div class="withdrawals-mobile-list">
+              <div v-if="withdrawalsLoading" class="empty-cell">{{ t('common.loading') }}</div>
+              <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 class="design-withdraw-top">
+                  <div class="design-withdraw-head">
+                    <div class="design-withdraw-date">
+                      {{ formatWithdrawTime(w.CreatedAt ?? w.createdAt) }}
+                    </div>
+                    <div class="design-withdraw-chain">{{ w.chain || '—' }}</div>
                   </div>
-                  <div class="withdrawal-mobile-address">{{ shortAddress(w.tokenAddress ?? w.walletAddress) }}</div>
-                </div>
-                <span :class="['withdrawal-status-pill', getWithdrawStatusClass(w.status)]">
-                  {{ getWithdrawStatusLabel(w.status) }}
-                </span>
-              </div>
-              <div v-if="w.reason" class="withdrawal-mobile-reason">
-                {{ w.reason }}
-              </div>
-            </div>
-          </div>
-          <v-table v-else class="wallet-table">
-            <thead>
-              <tr>
-                <th class="text-left">{{ t('wallet.withdrawAmount') }}</th>
-                <th class="text-left">{{ t('wallet.withdrawStatus') }}</th>
-                <th class="text-left">{{ t('wallet.withdrawAddress') }}</th>
-                <th class="text-left">{{ t('wallet.withdrawChain') }}</th>
-                <th class="text-left">{{ t('wallet.withdrawTime') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-if="withdrawalsLoading">
-                <td colspan="5" class="empty-cell">{{ t('common.loading') }}</td>
-              </tr>
-              <tr v-else-if="withdrawalsList.length === 0">
-                <td colspan="5" class="empty-cell">{{ t('wallet.noWithdrawalsFound') }}</td>
-              </tr>
-              <tr v-for="w in withdrawalsList" :key="String(w.ID ?? w.requestNo ?? '')">
-                <td>${{ formatWithdrawAmount(w.amount) }}</td>
-                <td>
                   <span :class="['withdrawal-status-pill', getWithdrawStatusClass(w.status)]">
                     {{ getWithdrawStatusLabel(w.status) }}
                   </span>
-                  <div v-if="w.reason" class="withdrawal-reason">
-                    {{ w.reason }}
+                </div>
+                <div class="design-withdraw-mid">
+                  <div class="design-withdraw-col">
+                    <div class="design-withdraw-label">{{ t('wallet.withdrawAmountLabel') }}</div>
+                    <div class="design-withdraw-value">{{ getWithdrawAmountText(w) }}</div>
                   </div>
-                </td>
-                <td class="cell-address">{{ shortAddress(w.tokenAddress ?? w.walletAddress) }}</td>
-                <td>{{ w.chain || '—' }}</td>
-                <td>{{ formatWithdrawTime(w.CreatedAt ?? w.createdAt) }}</td>
-              </tr>
-            </tbody>
-          </v-table>
-        </template>
-        <!-- 分页 -->
-        <div v-if="currentListTotal > 0" class="pagination-bar">
-          <span class="pagination-info">
-            {{ 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"
-            />
+                  <div class="design-withdraw-col right">
+                    <div class="design-withdraw-label">{{ t('wallet.feeLabel') }}</div>
+                    <div class="design-withdraw-value">{{ getWithdrawFeeText(w) }}</div>
+                  </div>
+                </div>
+                <div class="design-withdraw-bottom">
+                  <div class="design-withdraw-label">{{ t('wallet.withdrawAddressLabel') }}</div>
+                  <div class="withdrawal-mobile-address">
+                    {{ shortAddress(w.tokenAddress ?? w.walletAddress) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div class="empty-cell">{{ t('common.noData') }}</div>
+          </template>
+          <div v-if="false && currentListTotal > 0" class="pagination-bar">
+            <span class="pagination-info">
+              {{ 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"
+              />
+            </div>
           </div>
-        </div>
-      </v-card>
+        </v-card>
+      </div>
     </div>
 
     <DepositDialog v-model="depositDialogOpen" :balance="portfolioBalance" />
@@ -692,26 +402,35 @@
         <v-card-text class="sell-dialog-body">
           <div class="sell-dialog-icon-wrap">
             <div class="position-icon" :class="sellPositionItem.iconClass">
-              <img v-if="sellPositionItem.imageUrl" :src="sellPositionItem.imageUrl" alt="" class="position-icon-img" />
-              <v-icon v-else-if="sellPositionItem.icon" size="20" class="position-icon-svg">{{ sellPositionItem.icon }}</v-icon>
+              <img
+                v-if="sellPositionItem.imageUrl"
+                :src="sellPositionItem.imageUrl"
+                alt=""
+                class="position-icon-img"
+              />
+              <v-icon v-else-if="sellPositionItem.icon" size="20" class="position-icon-svg">{{
+                sellPositionItem.icon
+              }}</v-icon>
               <span v-else class="position-icon-char">{{ sellPositionItem.iconChar || '•' }}</span>
             </div>
           </div>
-          <h3 class="sell-dialog-title">Sell {{ sellPositionItem.sellOutcome || 'Position' }}</h3>
+          <h3 class="sell-dialog-title">
+            {{ t('wallet.sellDialogTitle', { outcome: sellPositionItem.sellOutcome || t('wallet.position') }) }}
+          </h3>
           <p class="sell-dialog-market">{{ sellPositionItem.market }}</p>
           <div class="sell-receive-box">
             <div class="sell-receive-label">
               <v-icon size="20" color="success">mdi-sack</v-icon>
-              <span>Receive</span>
+              <span>{{ t('wallet.sellDialogReceive') }}</span>
             </div>
             <div class="sell-receive-value">{{ sellReceiveAmount }}</div>
           </div>
         </v-card-text>
         <v-card-actions class="sell-dialog-actions">
           <v-btn color="success" variant="flat" block class="sell-redeem-btn" @click="redeemSell">
-            Redeem
+            {{ t('wallet.sellDialogRedeem') }}
           </v-btn>
-          <a href="#" class="sell-edit-link" @click.prevent="editSellOrder">Edit order</a>
+          <a href="#" class="sell-edit-link" @click.prevent="editSellOrder">{{ t('wallet.sellDialogEditOrder') }}</a>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -779,19 +498,12 @@ const withdrawStatusOptions = computed(() => [
   { label: t('wallet.withdrawStatusFailed'), value: WITHDRAW_STATUS.FAILED },
 ])
 /** 当前展示的持仓列表（mock 或 API） */
-const currentPositionList = computed(() =>
-  USE_MOCK_WALLET ? positions.value : positionList.value,
-)
+const currentPositionList = computed(() => (USE_MOCK_WALLET ? positions.value : positionList.value))
 /** 未结算项：从持仓列表中筛出可领取的（有 marketID+tokenID，且所属市场已关闭 market.closed=true） */
 const unsettledItems = computed(() => {
   const list = currentPositionList.value
   return list
-    .filter(
-      (p) =>
-        p.marketID &&
-        p.tokenID &&
-        p.marketClosed === true,
-    )
+    .filter((p) => p.marketID && p.tokenID && p.marketClosed === true)
     .map((p) => {
       const amount = parseFloat(String(p.value).replace(/[^0-9.-]/g, '')) || 0
       return { marketID: p.marketID!, tokenID: p.tokenID!, amount }
@@ -925,13 +637,109 @@ interface HistoryItem {
   imageUrl?: string
 }
 
-const positions = ref<Position[]>(
-  USE_MOCK_WALLET ? [...MOCK_WALLET_POSITIONS] : [],
-)
+function getOutcomeClass(outcomeTag?: string, fallback?: string): string {
+  if (fallback) return fallback
+  const normalized = (outcomeTag ?? '').toLowerCase()
+  return normalized.includes('yes') ? 'outcome-yes' : 'outcome-no'
+}
+
+function getOrderActionLabel(ord: OpenOrder): string {
+  const action = (ord.actionLabel ?? '').toLowerCase()
+  if (action.includes('sell')) return 'SELL'
+  return 'BUY'
+}
+
+function getOrderSideClass(ord: OpenOrder): string {
+  return getOrderActionLabel(ord) === 'SELL' ? 'side-sell' : 'side-buy'
+}
+
+function getOrderValueDisplay(ord: OpenOrder): string {
+  return `${ord.price} × ${ord.total}`
+}
+
+function getOrderValueClass(ord: OpenOrder): string {
+  return getOrderActionLabel(ord) === 'BUY' ? 'order-value-primary' : 'order-value-secondary'
+}
+
+function getOrderDisplayTitle(ord: OpenOrder): string {
+  const title = ord.market?.trim()
+  if (title) return title
+  return ord.outcome?.trim() ? `Market · ${ord.outcome}` : 'Untitled Market'
+}
+
+function isWithdrawalHistory(h: HistoryItem): boolean {
+  const text = `${h.activity} ${h.activityDetail ?? ''} ${h.market}`.toLowerCase()
+  return text.includes('withdraw') || text.includes('提现')
+}
+
+function isFundingHistory(h: HistoryItem): boolean {
+  const text = `${h.activity} ${h.activityDetail ?? ''} ${h.market}`.toLowerCase()
+  return (
+    text.includes('deposit') ||
+    text.includes('充值') ||
+    text.includes('withdraw') ||
+    text.includes('提现')
+  )
+}
+
+function getFundingTitle(h: HistoryItem): string {
+  if (h.market?.trim()) return h.market
+  return isWithdrawalHistory(h) ? t('wallet.btcWithdrawHistoryLabel') : t('wallet.usdtDepositHistoryLabel')
+}
+
+function getFundingIconText(h: HistoryItem): string {
+  return isWithdrawalHistory(h) ? t('wallet.withdrawIconText') : t('wallet.depositIconText')
+}
+
+function getFundingIconClass(h: HistoryItem): string {
+  return isWithdrawalHistory(h) ? 'funding-icon-withdraw' : 'funding-icon-deposit'
+}
+
+function getHistoryTagLabel(h: HistoryItem): 'BUY' | 'SELL' {
+  return h.profitLossNegative ? 'BUY' : 'SELL'
+}
+
+function getHistoryTagClass(h: HistoryItem): string {
+  return h.profitLossNegative ? 'history-tag-buy' : 'history-tag-sell'
+}
+
+const positions = ref<Position[]>(USE_MOCK_WALLET ? [...MOCK_WALLET_POSITIONS] : [])
 /** 提现记录列表 */
 const withdrawalsList = ref<SettlementRequestClientItem[]>([])
 const withdrawalsTotal = ref(0)
 const withdrawalsLoading = ref(false)
+const previewWithdrawals = ref<SettlementRequestClientItem[]>([
+  {
+    ID: -1,
+    CreatedAt: '2024-01-15T14:30:25Z',
+    chain: 'Polygon',
+    amount: 2500000000,
+    fee: '0.00',
+    status: WITHDRAW_STATUS.PENDING,
+    tokenAddress: '0x27fa...79ab',
+    tokenSymbol: 'USDT',
+  },
+  {
+    ID: -2,
+    CreatedAt: '2024-01-14T09:16:53Z',
+    chain: 'Bitcoin',
+    amount: 850000000,
+    fee: '0.0065',
+    status: WITHDRAW_STATUS.SUCCESS,
+    tokenAddress: 'bc1q...49x7n',
+    tokenSymbol: 'BTC',
+  },
+  {
+    ID: -3,
+    CreatedAt: '2024-01-12T11:26:03Z',
+    chain: 'Ethereum',
+    amount: 5260000000,
+    fee: '0.05',
+    status: WITHDRAW_STATUS.REJECTED,
+    tokenAddress: '0x7f42...f9d9',
+    tokenSymbol: 'ETH',
+  },
+])
 
 /** 持仓列表（API 数据，非 mock 时使用） */
 const positionList = ref<Position[]>([])
@@ -975,9 +783,7 @@ async function loadPositionList() {
   }
 }
 
-const openOrders = ref<OpenOrder[]>(
-  USE_MOCK_WALLET ? [...MOCK_WALLET_ORDERS] : [],
-)
+const openOrders = ref<OpenOrder[]>(USE_MOCK_WALLET ? [...MOCK_WALLET_ORDERS] : [])
 /** 未成交订单（API 数据，非 mock 时使用） */
 const openOrderList = ref<OpenOrder[]>([])
 const openOrderTotal = ref(0)
@@ -1026,9 +832,7 @@ async function loadOpenOrders() {
   }
 }
 
-const history = ref<HistoryItem[]>(
-  USE_MOCK_WALLET ? [...MOCK_WALLET_HISTORY] : [],
-)
+const history = ref<HistoryItem[]>(USE_MOCK_WALLET ? [...MOCK_WALLET_HISTORY] : [])
 /** 订单历史（API 数据，非 mock 时使用） */
 const historyList = ref<HistoryItem[]>([])
 const historyTotal = ref(0)
@@ -1108,6 +912,10 @@ async function loadWithdrawals() {
   }
 }
 
+const displayedWithdrawals = computed(() =>
+  withdrawalsList.value.length > 0 ? withdrawalsList.value : previewWithdrawals.value,
+)
+
 function formatWithdrawAmount(amount: number | undefined): string {
   return amountToUsdcDisplay(amount)
 }
@@ -1127,12 +935,54 @@ function formatWithdrawTime(iso: string | undefined): string {
   }
 }
 
+function getWithdrawFeeDisplay(w: SettlementRequestClientItem): string {
+  const fee = (w as { fee?: number; gasFee?: number; serviceFee?: number }).fee
+  const gasFee = (w as { fee?: number; gasFee?: number; serviceFee?: number }).gasFee
+  const serviceFee = (w as { fee?: number; gasFee?: number; serviceFee?: number }).serviceFee
+  const value = fee ?? gasFee ?? serviceFee
+  return value == null ? '—' : `$${amountToUsdcDisplay(value)}`
+}
+
+function getWithdrawTokenSymbol(w: SettlementRequestClientItem): string {
+  const symbol = (w as { tokenSymbol?: string }).tokenSymbol
+  if (symbol && symbol.trim()) return symbol.toUpperCase()
+  const chain = (w.chain ?? '').toLowerCase()
+  if (chain.includes('btc') || chain.includes('bitcoin')) return 'BTC'
+  if (chain.includes('eth') || chain.includes('ethereum')) return 'ETH'
+  return 'USDT'
+}
+
+function getWithdrawAmountText(w: SettlementRequestClientItem): string {
+  const amount = Number(amountToUsdcDisplay(w.amount))
+  const amountText = Number.isFinite(amount)
+    ? amount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+    : '0.00'
+  return `${amountText} ${getWithdrawTokenSymbol(w)}`
+}
+
+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,
+  )
+  const feeText = Number.isFinite(feeRaw)
+    ? feeRaw.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 4 })
+    : '0.00'
+  return `${feeText} ${getWithdrawTokenSymbol(w)}`
+}
+
 function getWithdrawStatusLabel(status: string | undefined): string {
   const s = (status ?? '').toLowerCase()
-  if (s === WITHDRAW_STATUS.PENDING || s === '0' || s === 'pending') return t('wallet.withdrawStatusPending')
-  if (s === WITHDRAW_STATUS.SUCCESS || s === '1' || s === 'success') return t('wallet.withdrawStatusSuccess')
-  if (s === WITHDRAW_STATUS.REJECTED || s === '2' || s === 'rejected') return t('wallet.withdrawStatusRejected')
-  if (s === WITHDRAW_STATUS.FAILED || s === '3' || s === 'failed') return t('wallet.withdrawStatusFailed')
+  if (s === WITHDRAW_STATUS.PENDING || s === '0' || s === 'pending')
+    return t('wallet.withdrawStatusPending')
+  if (s === WITHDRAW_STATUS.SUCCESS || s === '1' || s === 'success')
+    return t('wallet.withdrawStatusSuccess')
+  if (s === WITHDRAW_STATUS.REJECTED || s === '2' || s === 'rejected')
+    return t('wallet.withdrawStatusRejected')
+  if (s === WITHDRAW_STATUS.FAILED || s === '3' || s === 'failed')
+    return t('wallet.withdrawStatusFailed')
   return status ?? '—'
 }
 
@@ -1279,7 +1129,7 @@ async function cancelOrder(ord: OpenOrder) {
       }
       userStore.fetchUsdcBalance()
     } else {
-      cancelOrderError.value = res.msg || '取消失败'
+      cancelOrderError.value = res.msg || t('wallet.cancelFailed')
       showCancelError.value = true
     }
   } catch (e) {
@@ -1432,8 +1282,7 @@ function initPlChart() {
 }
 
 const handleResize = () => {
-  if (plChartInstance && plChartRef.value)
-    plChartInstance.resize(plChartRef.value.clientWidth, 160)
+  if (plChartInstance && plChartRef.value) plChartInstance.resize(plChartRef.value.clientWidth, 160)
 }
 
 watch(plRange, () => updatePlChart())
@@ -1481,9 +1330,25 @@ async function submitAuthorize() {
 
 <style scoped>
 .wallet-container {
-  max-width: 1200px;
+  width: 100%;
+  max-width: 100%;
   margin: 0 auto;
-  padding: 24px 16px;
+  padding: 16px;
+  background: #fcfcfc;
+  box-sizing: border-box;
+}
+
+.wallet-mobile-frame {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.wallet-mobile-header {
+  color: #111827;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
 }
 
 .wallet-cards {
@@ -1491,9 +1356,56 @@ async function submitAuthorize() {
 }
 
 .wallet-card {
-  padding: 20px;
+  padding: 16px;
   border: 1px solid #e5e7eb;
-  height: 100%;
+  border-radius: 16px;
+  height: auto;
+  box-shadow: none;
+}
+
+.design-tu-asset {
+  background: #5b5bd6;
+  border: 0;
+}
+
+.design-tu-asset .card-title,
+.design-tu-asset .card-value {
+  color: #fff;
+}
+
+.design-tu-asset .card-title {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.design-tu-actions {
+  gap: 10px;
+}
+
+.design-tu-action {
+  flex: 1;
+  height: 72px;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  color: #111827;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.design-tu-settlement {
+  padding: 12px 14px;
+  border-radius: 16px;
+  background: #fff;
+}
+
+.design-tu-claim-btn {
+  min-width: 0;
+  height: 30px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 0 12px;
 }
 
 .card-header {
@@ -1506,7 +1418,7 @@ async function submitAuthorize() {
 .card-title {
   font-size: 14px;
   font-weight: 500;
-  color: #374151;
+  color: #111827;
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -1528,10 +1440,10 @@ async function submitAuthorize() {
 }
 
 .card-value {
-  font-size: 28px;
-  font-weight: 600;
+  font-size: 32px;
+  font-weight: 700;
   color: #111827;
-  margin-bottom: 4px;
+  margin-bottom: 0;
 }
 
 .card-value-row {
@@ -1557,8 +1469,8 @@ async function submitAuthorize() {
 
 .card-actions {
   display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
+  gap: 10px;
+  flex-wrap: nowrap;
 }
 
 .action-btn {
@@ -1589,20 +1501,20 @@ async function submitAuthorize() {
 
 .settlement-card {
   border: 1px solid #e5e7eb;
-  padding: 12px 16px;
+  padding: 12px 14px;
 }
 
 .settlement-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  flex-wrap: wrap;
+  gap: 10px;
+  flex-wrap: nowrap;
 }
 
 .settlement-label {
-  font-size: 15px;
-  font-weight: 500;
+  font-size: 13px;
+  font-weight: 600;
   color: #111827;
 }
 
@@ -1619,16 +1531,48 @@ async function submitAuthorize() {
 
 .settlement-claim-btn {
   text-transform: none;
-  font-weight: 500;
-  min-width: 88px;
+  font-weight: 600;
+  min-width: 64px;
 }
 
 .wallet-section {
-  margin-top: 8px;
+  margin-top: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  background: #fff;
+  padding: 16px;
 }
 
 .wallet-tabs {
-  margin-bottom: 16px;
+  margin-bottom: 12px;
+  min-height: 30px;
+}
+
+.wallet-tabs :deep(.v-slide-group__content) {
+  gap: 8px;
+}
+
+.wallet-tabs :deep(.v-tab) {
+  min-width: auto;
+  height: 30px;
+  padding: 0 12px;
+  border-radius: 999px;
+  text-transform: none;
+  font-size: 12px;
+  font-weight: 600;
+  background: #f8fafc;
+  color: #6b7280;
+  border: 1px solid #e5e7eb;
+}
+
+.wallet-tabs :deep(.v-tab--selected) {
+  background: #5b5bd6;
+  color: #fff;
+  border-color: #5b5bd6;
+}
+
+.wallet-tabs :deep(.v-tab__slider) {
+  display: none;
 }
 
 .toolbar {
@@ -1653,10 +1597,393 @@ async function submitAuthorize() {
 }
 
 .table-card {
-  border: 1px solid #e5e7eb;
+  border: 0;
   overflow: hidden;
 }
 
+.wallet-design-card {
+  border: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
+.design-pos-card,
+.design-order-card,
+.design-trade-card,
+.design-funding-card,
+.design-withdraw-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  padding: 14px;
+  background: #fff;
+}
+
+.positions-mobile-list .position-mobile-card.design-pos-card,
+.orders-mobile-list .order-mobile-card.design-order-card,
+.history-mobile-list .history-mobile-card.design-trade-card,
+.history-mobile-list .history-mobile-card.design-funding-card,
+.withdrawals-mobile-list .withdrawal-mobile-card.design-withdraw-card {
+  padding: 14px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #e5e7eb;
+  background: #fff;
+  cursor: default;
+  transition: none;
+}
+
+.positions-mobile-list .position-mobile-card.design-pos-card:last-child,
+.orders-mobile-list .order-mobile-card.design-order-card:last-child,
+.history-mobile-list .history-mobile-card:last-child,
+.withdrawals-mobile-list .withdrawal-mobile-card:last-child {
+  margin-bottom: 0;
+}
+
+.positions-mobile-list .position-mobile-card.design-pos-card:hover,
+.orders-mobile-list .order-mobile-card.design-order-card:hover,
+.history-mobile-list .history-mobile-card.design-trade-card:hover,
+.history-mobile-list .history-mobile-card.design-funding-card:hover,
+.withdrawals-mobile-list .withdrawal-mobile-card.design-withdraw-card:hover {
+  background: #fff;
+}
+
+.design-pos-top,
+.design-order-top,
+.design-history-top,
+.design-withdraw-top,
+.design-withdraw-mid {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.design-pos-left,
+.design-order-left,
+.design-history-left,
+.design-funding-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+}
+
+.design-order-top {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr) 32px;
+  column-gap: 12px;
+  align-items: start;
+}
+
+.design-pos-title-col,
+.design-order-tags,
+.design-pos-tags,
+.design-history-bottom,
+.design-withdraw-tags {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.design-order-title-col {
+  grid-column: 2;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.design-pos-right {
+  text-align: right;
+  flex-shrink: 0;
+  max-width: 45%;
+}
+
+.design-pos-card .position-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+}
+
+.design-pos-card .position-mobile-title {
+  margin-bottom: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.design-pos-card .design-pos-title-col {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 0;
+}
+
+.marquee-container {
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.marquee-track {
+  display: inline-flex;
+  align-items: center;
+  min-width: max-content;
+  gap: 40px;
+  animation: wallet-title-marquee 10s linear infinite;
+}
+
+.marquee-track > span {
+  white-space: nowrap;
+}
+
+@keyframes wallet-title-marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(-50% - 20px));
+  }
+}
+
+.design-pos-card .position-value {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.design-pos-card .position-value-change {
+  font-size: 13px;
+  margin-top: 2px;
+}
+
+.order-title-marquee {
+  width: 100%;
+}
+
+.order-title-marquee .marquee-track {
+  animation-duration: 9s;
+}
+
+.history-title-marquee {
+  width: 100%;
+}
+
+.history-title-marquee .marquee-track {
+  animation-duration: 9s;
+}
+
+.design-order-card .design-order-tags {
+  flex-wrap: nowrap;
+  gap: 6px;
+}
+
+.design-order-card .design-order-stats {
+  margin-top: 8px;
+  padding-top: 4px;
+  width: 100%;
+}
+
+.order-value-primary {
+  color: #5b5bd6;
+}
+
+.order-value-secondary {
+  color: #6b7280;
+}
+
+.design-pos-stats,
+.design-order-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 4px;
+  padding-top: 4px;
+}
+
+.design-pos-stat,
+.design-order-stat,
+.design-withdraw-col {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.design-pos-stat-label,
+.design-order-stat-label,
+.design-withdraw-label {
+  font-size: 11px;
+  color: #9ca3af;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.design-pos-stat-value,
+.design-order-stat-value,
+.design-withdraw-value {
+  font-size: 13px;
+  color: #111827;
+  font-weight: 600;
+  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;
+  padding: 0 10px;
+}
+
+.order-outcome-pill {
+  height: 20px;
+  border-radius: 999px;
+  padding: 0 8px;
+}
+
+.withdraw-chain-pill {
+  height: 22px;
+  border-radius: 8px;
+  padding: 0 10px;
+}
+
+.side-buy {
+  color: #2563eb;
+  border: 1.5px solid #2563eb;
+  background: transparent;
+}
+
+.side-sell {
+  color: #dc2626;
+  border: 1.5px solid #dc2626;
+  background: transparent;
+}
+
+.outcome-yes {
+  color: #16a34a;
+  background: #dcfce7;
+}
+
+.outcome-no {
+  color: #dc2626;
+  background: #fee2e2;
+}
+
+.design-history-bottom {
+  justify-content: space-between;
+  margin-top: 8px;
+}
+
+.history-mobile-card.design-trade-card,
+.history-mobile-card.design-funding-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  padding: 14px;
+  background: #fff;
+}
+
+.history-mobile-card.design-trade-card .history-mobile-icon,
+.history-mobile-card.design-funding-card .history-mobile-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+}
+
+.history-mobile-card.design-trade-card .history-mobile-title,
+.history-mobile-card.design-funding-card .history-mobile-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 0;
+}
+
+.history-mobile-card.design-trade-card .history-mobile-activity,
+.history-mobile-card.design-funding-card .history-mobile-activity {
+  font-size: 11px;
+  font-weight: 500;
+  color: #9ca3af;
+}
+
+.history-mobile-card.design-trade-card .history-mobile-pl {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.history-mobile-card.design-funding-card .history-mobile-pl {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.history-mobile-card.design-funding-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.history-tag-sell {
+  color: #2563eb;
+  border: 1.5px solid #2563eb;
+  background: transparent;
+}
+
+.history-tag-buy {
+  color: #dc2626;
+  border: 1.5px solid #dc2626;
+  background: transparent;
+}
+
+.funding-icon-deposit {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.funding-icon-withdraw {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.design-history-meta {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.design-funding-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.withdraw-chain-pill {
+  background: #f8fafc;
+  color: #334155;
+}
+
+.design-withdraw-date {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.design-withdraw-mid {
+  margin-top: 8px;
+}
+
+.design-withdraw-col.right {
+  text-align: right;
+}
+
+.design-withdraw-bottom {
+  margin-top: 8px;
+  padding-top: 6px;
+}
+
 .positions-table,
 .wallet-table {
   font-size: 14px;
@@ -1954,14 +2281,21 @@ async function submitAuthorize() {
   border-bottom: 1px solid #f3f4f6;
 }
 
+.order-mobile-card.design-order-card {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+}
+
 .order-mobile-card:last-child {
   border-bottom: none;
 }
 
 .order-mobile-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1977,8 +2311,8 @@ async function submitAuthorize() {
 }
 
 .order-mobile-title {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 15px;
+  font-weight: 600;
   color: #111827;
   line-height: 1.35;
   margin-bottom: 4px;
@@ -2004,7 +2338,16 @@ async function submitAuthorize() {
 }
 
 .order-cancel-icon {
+  grid-column: 3;
+  justify-self: end;
+  align-self: start;
+  width: 32px;
+  height: 32px;
   min-width: 32px;
+  border-radius: 999px;
+  border: 1px solid #e5e7eb;
+  background: #f8fafc;
+  color: #6b7280;
   padding: 0;
 }
 
@@ -2250,6 +2593,76 @@ async function submitAuthorize() {
   font-family: monospace;
   margin-top: 4px;
 }
+
+/* 1:1 overrides for UjOKn withdraw cards */
+.withdrawal-mobile-card.design-withdraw-card {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  padding: 10px 12px;
+}
+
+.withdrawal-mobile-card.design-withdraw-card .design-withdraw-top {
+  align-items: flex-start;
+  margin-bottom: 2px;
+}
+
+.withdrawal-mobile-card.design-withdraw-card .design-withdraw-head {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.withdrawal-mobile-card.design-withdraw-card .design-withdraw-date {
+  font-size: 13px;
+  font-weight: 500;
+  color: #6b7280;
+}
+
+.withdrawal-mobile-card.design-withdraw-card .design-withdraw-chain {
+  font-size: 11px;
+  font-weight: 500;
+  color: #9ca3af;
+}
+
+.withdrawal-mobile-card.design-withdraw-card .design-withdraw-mid {
+  margin-top: 4px;
+  align-items: flex-start;
+}
+
+.withdrawal-mobile-card.design-withdraw-card .design-withdraw-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.withdrawal-mobile-card.design-withdraw-card .design-withdraw-label {
+  font-size: 10px;
+  font-weight: 500;
+  color: #9ca3af;
+}
+
+.withdrawal-mobile-card.design-withdraw-card .withdrawal-mobile-address {
+  margin-top: 0;
+  font-family: Inter, sans-serif;
+  font-size: 13px;
+  color: #111827;
+}
+
+.withdrawal-mobile-card.design-withdraw-card .withdrawal-status-pill {
+  height: 26px;
+  padding: 0 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.wallet-design-card .withdrawals-mobile-list {
+  padding: 0;
+  gap: 10px;
+}
 .cell-address {
   font-family: monospace;
   font-size: 13px;