From 08ae68b767b289de46fe7e2cf560dc7d4babcacb Mon Sep 17 00:00:00 2001
From: ivan <ivan@qq.com>
Date: Mon, 9 Feb 2026 16:34:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E9=92=B1=E5=8C=85?=
 =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF=E5=85=BC=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Wallet.vue | 1162 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 1069 insertions(+), 93 deletions(-)

diff --git a/src/views/Wallet.vue b/src/views/Wallet.vue
index 16aa16d..8b07cac 100644
--- a/src/views/Wallet.vue
+++ b/src/views/Wallet.vue
@@ -88,6 +88,10 @@
           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>
+            Close Losses
+          </v-btn>
           <v-btn variant="outlined" size="small" class="filter-btn">
             <v-icon size="18">mdi-filter</v-icon>
             All
@@ -104,98 +108,270 @@
             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>
+            Current value
+          </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>
+            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>
+            Cancel all
+          </v-btn>
+        </template>
         <v-btn v-else variant="outlined" size="small" class="filter-btn">
           <v-icon size="18">mdi-filter</v-icon>
           Market
         </v-btn>
       </div>
       <v-card class="table-card" elevation="0" rounded="lg">
-        <!-- 持仓 -->
-        <v-table v-if="activeTab === 'positions'" class="wallet-table">
-          <thead>
-            <tr>
-              <th class="text-left">MARKET</th>
-              <th class="text-left">
-                AVG → NOW
-                <v-icon size="14" class="th-icon">mdi-information-outline</v-icon>
-              </th>
-              <th class="text-left">BET</th>
-              <th class="text-left">TO WIN</th>
-              <th class="text-left">
-                VALUE
-                <v-icon size="14" class="th-icon">mdi-chevron-down</v-icon>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-if="filteredPositions.length === 0">
-              <td colspan="5" class="empty-cell">No positions found.</td>
-            </tr>
-            <tr v-for="pos in paginatedPositions" :key="pos.id">
-              <td class="cell-market">{{ pos.market }}</td>
-              <td>{{ pos.avgNow }}</td>
-              <td>{{ pos.bet }}</td>
-              <td>{{ pos.toWin }}</td>
-              <td>{{ pos.value }}</td>
-            </tr>
-          </tbody>
-        </v-table>
-        <!-- 未成交 -->
-        <v-table v-else-if="activeTab === 'orders'" class="wallet-table">
-          <thead>
-            <tr>
-              <th class="text-left">MARKET</th>
-              <th class="text-left">SIDE</th>
-              <th class="text-left">OUTCOME</th>
-              <th class="text-left">PRICE</th>
-              <th class="text-left">FILLED</th>
-              <th class="text-left">TOTAL</th>
-              <th class="text-left">EXPIRATION</th>
-              <th class="text-right">ACTION</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-if="filteredOpenOrders.length === 0">
-              <td colspan="8" class="empty-cell">No open orders found.</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" @click="cancelOrder(ord.id)">Cancel</v-btn>
-              </td>
-            </tr>
-          </tbody>
-        </v-table>
-        <!-- 历史记录 -->
-        <v-table v-else class="wallet-table">
-          <thead>
-            <tr>
-              <th class="text-left">ACTIVITY</th>
-              <th class="text-left">MARKET</th>
-              <th class="text-left">VALUE</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-if="filteredHistory.length === 0">
-              <td colspan="3" class="empty-cell">You haven't traded any polymarkets yet</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 v-if="activeTab === 'positions'">
+          <!-- 移动端：可折叠列表 -->
+          <div v-if="mobile" class="positions-mobile-list">
+            <template v-if="filteredPositions.length === 0">
+              <div class="empty-cell">No positions found.</div>
+            </template>
+            <div
+              v-for="pos in paginatedPositions"
+              :key="pos.id"
+              class="position-mobile-card"
+              :class="{ expanded: expandedPositionId === pos.id }"
+              @click="togglePositionExpanded(pos.id)"
+            >
+              <div class="position-mobile-row">
+                <div class="position-icon" :class="pos.iconClass">
+                  <span 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)">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">MARKET</th>
+                <th class="text-left">
+                  AVG → NOW
+                  <v-icon size="14" class="th-icon">mdi-information-outline</v-icon>
+                </th>
+                <th class="text-left">BET</th>
+                <th class="text-left">TO WIN</th>
+                <th class="text-left">
+                  VALUE
+                  <v-icon size="14" class="th-icon">mdi-chevron-down</v-icon>
+                </th>
+                <th class="text-right">ACTION</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="filteredPositions.length === 0">
+                <td colspan="6" class="empty-cell">No positions found.</td>
+              </tr>
+              <tr v-for="pos in paginatedPositions" :key="pos.id" class="position-row">
+                <td class="cell-market">
+                  <div class="position-market-cell">
+                    <div class="position-icon" :class="pos.iconClass">
+                      <v-icon v-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">
+                        <span v-if="pos.outcomeTag" class="position-outcome-pill" :class="pos.outcomePillClass">{{ pos.outcomeTag }}</span>
+                        <span class="position-shares">{{ pos.shares }}</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>
+                </td>
+                <td class="text-right cell-actions">
+                  <v-btn color="primary" variant="flat" size="small" class="position-sell-btn" @click="sellPosition(pos.id)">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>
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </template>
+        <!-- 未成交：移动端卡片列表 / 桌面端表格 -->
+        <template v-else-if="activeTab === 'orders'">
+          <!-- 移动端：挂单卡片列表 -->
+          <div v-if="mobile" class="orders-mobile-list">
+            <template v-if="filteredOpenOrders.length === 0">
+              <div class="empty-cell">No open orders found.</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" @click.stop="cancelOrder(ord.id)">
+                  <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">Expiration: {{ ord.expiration }}</div>
+              </div>
+            </div>
+          </div>
+          <!-- 桌面端：表格 -->
+          <v-table v-else class="wallet-table">
+            <thead>
+              <tr>
+                <th class="text-left">MARKET</th>
+                <th class="text-left">SIDE</th>
+                <th class="text-left">OUTCOME</th>
+                <th class="text-left">PRICE</th>
+                <th class="text-left">FILLED</th>
+                <th class="text-left">TOTAL</th>
+                <th class="text-left">EXPIRATION</th>
+                <th class="text-right">ACTION</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="filteredOpenOrders.length === 0">
+                <td colspan="8" class="empty-cell">No open orders found.</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" @click="cancelOrder(ord.id)">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="filteredHistory.length === 0">
+              <div class="empty-cell">You haven't traded any polymarkets yet</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">
+                  <span 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">
+                  <span :class="['history-mobile-pl', 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)">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>
+              </div>
+            </div>
+          </div>
+          <!-- 桌面端：表格 -->
+          <v-table v-else class="wallet-table">
+            <thead>
+              <tr>
+                <th class="text-left">ACTIVITY</th>
+                <th class="text-left">MARKET</th>
+                <th class="text-left">VALUE</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="filteredHistory.length === 0">
+                <td colspan="3" class="empty-cell">You haven't traded any polymarkets yet</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>
         <!-- 分页 -->
         <div v-if="currentListTotal > 0" class="pagination-bar">
           <span class="pagination-info">
@@ -233,17 +409,52 @@
       :balance="portfolioBalance"
       @success="onWithdrawSuccess"
     />
+
+    <!-- Sell position dialog -->
+    <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-icon>mdi-close</v-icon>
+          </v-btn>
+        </div>
+        <v-card-text class="sell-dialog-body">
+          <div class="sell-dialog-icon-wrap">
+            <div class="position-icon" :class="sellPositionItem.iconClass">
+              <span class="position-icon-char">{{ sellPositionItem.iconChar }}</span>
+            </div>
+          </div>
+          <h3 class="sell-dialog-title">Sell {{ sellPositionItem.sellOutcome || '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>
+            </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
+          </v-btn>
+          <a href="#" class="sell-edit-link" @click.prevent="editSellOrder">Edit order</a>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-container>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { useDisplay } from 'vuetify'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
 import DepositDialog from '../components/DepositDialog.vue'
 import WithdrawDialog from '../components/WithdrawDialog.vue'
 import { useUserStore } from '../stores/user'
 
+const { mobile } = useDisplay()
 const userStore = useUserStore()
 const portfolioBalance = computed(() => userStore.balance)
 const profitLoss = ref('0.00')
@@ -253,14 +464,47 @@ const activeTab = ref<'positions' | 'orders' | 'history'>('positions')
 const search = ref('')
 const depositDialogOpen = ref(false)
 const withdrawDialogOpen = ref(false)
+const sellDialogOpen = ref(false)
+const sellPositionItem = ref<Position | null>(null)
+/** 移动端展开的持仓 id，null 表示全部折叠 */
+const expandedPositionId = ref<string | null>(null)
+/** 移动端展开的历史记录 id */
+const expandedHistoryId = ref<string | null>(null)
+
+function togglePositionExpanded(id: string) {
+  expandedPositionId.value = expandedPositionId.value === id ? null : id
+}
+
+function toggleHistoryExpanded(id: string) {
+  expandedHistoryId.value = expandedHistoryId.value === id ? null : id
+}
 
 interface Position {
   id: string
   market: string
+  icon?: string
+  iconChar?: string
+  iconClass?: string
+  outcomeTag?: string
+  outcomePillClass?: string
+  shares: string
   avgNow: string
   bet: string
   toWin: string
   value: string
+  valueChange?: string
+  valueChangePct?: string
+  valueChangeLoss?: boolean
+  /** 用于 Sell 弹窗标题，如 "Down" | "Yes" | "No" */
+  sellOutcome?: string
+  /** 移动端副标题 "on Up/Down to win" 中的词 */
+  outcomeWord?: string
+}
+
+/** 从 avgNow "72¢ → 0.5¢" 解析出 [avg, now] */
+function parseAvgNow(avgNow: string): [string, string] {
+  const parts = avgNow.split(' → ')
+  return parts.length >= 2 ? [parts[0].trim(), parts[1].trim()] : [avgNow, '']
 }
 interface OpenOrder {
   id: string
@@ -271,6 +515,12 @@ interface OpenOrder {
   filled: string
   total: string
   expiration: string
+  /** 移动端展示：如 "Buy Up" */
+  actionLabel?: string
+  /** 移动端展示：如 "0/5" */
+  filledDisplay?: string
+  iconChar?: string
+  iconClass?: string
 }
 interface HistoryItem {
   id: string
@@ -278,19 +528,136 @@ interface HistoryItem {
   side: 'Yes' | 'No'
   activity: string
   value: string
+  /** 移动端：如 "Sold 1 Down at 50¢" */
+  activityDetail?: string
+  /** 移动端：盈亏展示如 "+$0.50" */
+  profitLoss?: string
+  profitLossNegative?: boolean
+  /** 移动端：如 "3 minutes ago" */
+  timeAgo?: string
+  avgPrice?: string
+  shares?: string
+  iconChar?: string
+  iconClass?: string
 }
 
 const positions = ref<Position[]>([
-  { id: 'p1', market: 'Will Bitcoin hit $100k by end of 2025?', avgNow: '72¢ → 75¢', bet: '$50', toWin: '$18', value: '$52' },
-  { id: 'p2', market: 'Will ETH merge complete by Q3?', avgNow: '45¢ → 48¢', bet: '$30', toWin: '$36', value: '$32' },
+  {
+    id: 'p1',
+    market: 'Bitcoin Up or Down - February 9, 2:00AM-2:15AM ET',
+    iconChar: '₿',
+    iconClass: 'position-icon-btc',
+    outcomeTag: 'Down 72¢',
+    outcomePillClass: 'pill-down',
+    shares: '6.9 shares',
+    avgNow: '72¢ → 0.5¢',
+    bet: '$4.95',
+    toWin: '$6.87',
+    value: '$0.03',
+    valueChange: '-$4.91',
+    valueChangePct: '99.31%',
+    valueChangeLoss: true,
+    sellOutcome: 'Down',
+    outcomeWord: 'Down',
+  },
+  {
+    id: 'p2',
+    market: 'Bitcoin Up or Down - February 9, 2:15AM-2:30AM ET',
+    iconChar: '₿',
+    iconClass: 'position-icon-btc',
+    outcomeTag: 'Up 26¢',
+    outcomePillClass: 'pill-yes',
+    shares: '3.8 shares',
+    avgNow: '28¢ → 26¢',
+    bet: '$0.99',
+    toWin: '$3.54',
+    value: '$0.90',
+    valueChange: '-$0.09',
+    valueChangePct: '8.9%',
+    valueChangeLoss: true,
+    sellOutcome: 'Up',
+    outcomeWord: 'Up',
+  },
+  {
+    id: 'p3',
+    market: 'Will ETH merge complete by Q3?',
+    iconChar: 'Ξ',
+    iconClass: 'position-icon-eth',
+    outcomeTag: 'Yes 48¢',
+    outcomePillClass: 'pill-yes',
+    shares: '30 shares',
+    avgNow: '45¢ → 48¢',
+    bet: '$30',
+    toWin: '$36',
+    value: '$32',
+    valueChange: '+$2',
+    valueChangePct: '6.67%',
+    valueChangeLoss: false,
+    sellOutcome: 'Yes',
+    outcomeWord: 'Yes',
+  },
 ])
 const openOrders = ref<OpenOrder[]>([
-  { id: 'o1', market: 'Will Bitcoin hit $100k by end of 2025?', side: 'Yes', outcome: 'Yes', price: '70¢', filled: '0', total: '$70', expiration: 'Dec 31, 2025' },
-  { id: 'o2', market: 'Will ETH merge complete by Q3?', side: 'No', outcome: 'No', price: '52¢', filled: '25', total: '$26', expiration: 'Sep 30, 2025' },
+  {
+    id: 'o1',
+    market: 'Bitcoin Up or Down - February 9, 2:45AM-3:00AM ET',
+    side: 'Yes',
+    outcome: 'Up',
+    price: '1¢',
+    filled: '0',
+    total: '$0.05',
+    expiration: 'Until Cancelled',
+    actionLabel: 'Buy Up',
+    filledDisplay: '0/5',
+    iconChar: '₿',
+    iconClass: 'position-icon-btc',
+  },
+  { id: 'o2', market: 'Will Bitcoin hit $100k by end of 2025?', side: 'Yes', outcome: 'Yes', price: '70¢', filled: '0', total: '$70', expiration: 'Dec 31, 2025' },
+  { id: 'o3', market: 'Will ETH merge complete by Q3?', side: 'No', outcome: 'No', price: '52¢', filled: '25', total: '$26', expiration: 'Sep 30, 2025' },
 ])
 const history = ref<HistoryItem[]>([
-  { id: 'h1', market: 'Will Bitcoin hit $100k by end of 2025?', side: 'Yes', activity: 'Buy Yes', value: '$68' },
-  { id: 'h2', market: 'Will ETH merge complete by Q3?', side: 'No', activity: 'Sell No', value: '$35.20' },
+  {
+    id: 'h1',
+    market: 'Bitcoin Up or Down - February 9, 3:00AM-3:15AM ET',
+    side: 'No',
+    activity: 'Sell No',
+    activityDetail: 'Sold 1 Down at 50¢',
+    value: '$0.50',
+    profitLoss: '+$0.50',
+    profitLossNegative: false,
+    timeAgo: '3 minutes ago',
+    avgPrice: '50¢',
+    shares: '1',
+    iconChar: '₿',
+    iconClass: 'position-icon-btc',
+  },
+  {
+    id: 'h2',
+    market: 'Bitcoin Up or Down - February 9, 3:00AM-3:15AM ET',
+    side: 'Yes',
+    activity: 'Sell Yes',
+    activityDetail: 'Sold 1 Up at 63¢',
+    value: '$0.63',
+    profitLoss: '+$0.63',
+    profitLossNegative: false,
+    timeAgo: '6 minutes ago',
+    iconChar: '₿',
+    iconClass: 'position-icon-btc',
+  },
+  {
+    id: 'h3',
+    market: 'Bitcoin Up or Down - February 9, 3:00AM-3:15AM ET',
+    side: 'Yes',
+    activity: 'Split',
+    activityDetail: 'Split',
+    value: '-$1.00',
+    profitLoss: '-$1.00',
+    profitLossNegative: true,
+    timeAgo: '7 minutes ago',
+    iconChar: '₿',
+    iconClass: 'position-icon-btc',
+  },
+  { id: 'h4', market: 'Will ETH merge complete by Q3?', side: 'No', activity: 'Sell No', value: '$35.20' },
 ])
 
 function matchSearch(text: string): boolean {
@@ -344,6 +711,59 @@ function cancelOrder(id: string) {
   openOrders.value = openOrders.value.filter((o) => o.id !== id)
 }
 
+function cancelAllOrders() {
+  openOrders.value = []
+}
+
+const sellReceiveAmount = computed(() => {
+  const pos = sellPositionItem.value
+  return pos ? pos.value : '$0.00'
+})
+
+function openSellDialog(pos: Position) {
+  sellPositionItem.value = pos
+  sellDialogOpen.value = true
+}
+
+function closeSellDialog() {
+  sellDialogOpen.value = false
+  sellPositionItem.value = null
+}
+
+function sellPosition(id: string) {
+  const pos = positions.value.find((p) => p.id === id)
+  if (pos) openSellDialog(pos)
+}
+
+function redeemSell() {
+  if (sellPositionItem.value) {
+    // TODO: 调用赎回接口，成功后从持仓移除
+    positions.value = positions.value.filter((p) => p.id !== sellPositionItem.value!.id)
+    closeSellDialog()
+  }
+}
+
+function editSellOrder() {
+  // TODO: 跳转交易页或打开限价单
+  closeSellDialog()
+}
+
+function sharePosition(id: string) {
+  // TODO: 分享或复制链接
+}
+
+function closeLosses() {
+  // TODO: 关闭亏损仓位或筛选
+}
+
+function viewHistory(id: string) {
+  // TODO: 跳转交易详情或订单详情
+}
+
+function shareHistory(id: string) {
+  // TODO: 分享或复制链接
+}
+
 const plChartRef = ref<HTMLElement | null>(null)
 let plChartInstance: ECharts | null = null
 
@@ -632,10 +1052,476 @@ function onWithdrawSuccess() {
 }
 
 .cell-market {
-  max-width: 280px;
+  max-width: 320px;
   word-break: break-word;
 }
 
+/* 持仓行：市场图标 + 标题 + 标签 + 份额 */
+.position-market-cell {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.position-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #fff;
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.position-icon-btc {
+  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
+}
+
+.position-icon-eth {
+  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
+}
+
+.position-icon-svg {
+  color: 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;
+  border-radius: 999px;
+  font-weight: 500;
+}
+
+.pill-down {
+  background-color: #fee2e2;
+  color: #dc2626;
+}
+
+.pill-yes {
+  background-color: #dcfce7;
+  color: #059669;
+}
+
+.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;
+}
+
+.position-value-change {
+  font-size: 12px;
+  margin-top: 2px;
+}
+
+.value-loss {
+  color: #dc2626;
+}
+
+.value-gain {
+  color: #059669;
+}
+
+.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;
+}
+
+.positions-mobile-list .empty-cell {
+  padding: 48px 16px;
+  text-align: center;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.position-mobile-card {
+  border-bottom: 1px solid #f3f4f6;
+  padding: 14px 16px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.position-mobile-card:last-child {
+  border-bottom: none;
+}
+
+.position-mobile-card:hover {
+  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;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.position-mobile-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.position-mobile-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #111827;
+  line-height: 1.35;
+  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;
+}
+
+.orders-mobile-list .empty-cell {
+  padding: 48px 16px;
+  text-align: center;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.order-mobile-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.order-mobile-card:last-child {
+  border-bottom: none;
+}
+
+.order-mobile-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #fff;
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.order-mobile-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.order-mobile-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #111827;
+  line-height: 1.35;
+  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 {
+  min-width: 32px;
+  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: #dc2626;
+}
+
+.filter-btn-cancel .v-icon {
+  color: inherit;
+}
+
+/* 移动端历史列表 */
+.history-mobile-list {
+  padding: 0;
+}
+
+.history-mobile-list .empty-cell {
+  padding: 48px 16px;
+  text-align: center;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.history-mobile-card {
+  border-bottom: 1px solid #f3f4f6;
+  padding: 14px 16px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.history-mobile-card:last-child {
+  border-bottom: none;
+}
+
+.history-mobile-card:hover {
+  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;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #fff;
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.history-mobile-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.history-mobile-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #111827;
+  line-height: 1.35;
+  margin-bottom: 4px;
+}
+
+.history-mobile-activity {
+  font-size: 13px;
+  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;
+}
+
+.pl-gain {
+  color: #059669;
+}
+
+.pl-loss {
+  color: #dc2626;
+}
+
+.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 {
   color: #059669;
   font-weight: 500;
@@ -695,4 +1581,94 @@ function onWithdrawSuccess() {
   min-width: 32px;
   height: 32px;
 }
+
+/* Sell position dialog */
+.sell-dialog-card {
+  padding: 0;
+  overflow: hidden;
+}
+
+.sell-dialog-header {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 16px 0;
+}
+
+.sell-dialog-close {
+  color: #6b7280;
+}
+
+.sell-dialog-body {
+  padding: 0 24px 16px;
+  text-align: center;
+}
+
+.sell-dialog-icon-wrap {
+  margin-bottom: 12px;
+}
+
+.sell-dialog-body .position-icon {
+  margin: 0 auto;
+}
+
+.sell-dialog-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+  margin: 0 0 8px;
+}
+
+.sell-dialog-market {
+  font-size: 14px;
+  color: #6b7280;
+  line-height: 1.4;
+  margin: 0 0 20px;
+}
+
+.sell-receive-box {
+  background-color: #dcfce7;
+  border-radius: 12px;
+  padding: 16px;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.sell-receive-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #166534;
+}
+
+.sell-receive-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #166534;
+}
+
+.sell-dialog-actions {
+  flex-direction: column;
+  padding: 8px 24px 24px;
+  gap: 12px;
+}
+
+.sell-redeem-btn {
+  text-transform: none;
+  font-weight: 600;
+}
+
+.sell-edit-link {
+  font-size: 14px;
+  color: #2563eb;
+  text-decoration: none;
+}
+
+.sell-edit-link:hover {
+  text-decoration: underline;
+}
 </style>