From acc7d485e1d9db21c2237d0e382ec604caea67ed Mon Sep 17 00:00:00 2001
From: ivan <ivan@qq.com>
Date: Mon, 9 Feb 2026 15:16:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E5=90=88=E5=B9=B6?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TradeComponent.vue | 147 +++++++++++++++++++++++++++++-
 1 file changed, 144 insertions(+), 3 deletions(-)

diff --git a/src/components/TradeComponent.vue b/src/components/TradeComponent.vue
index 7003676..0725e26 100644
--- a/src/components/TradeComponent.vue
+++ b/src/components/TradeComponent.vue
@@ -22,7 +22,7 @@
             <v-list-item-title>Limit</v-list-item-title>
           </v-list-item>
           <v-divider></v-divider>
-          <v-list-item>
+          <v-list-item @click="openMergeDialog">
             <v-list-item-title>Merge</v-list-item-title>
           </v-list-item>
           <v-list-item>
@@ -294,7 +294,7 @@
               <v-list-item @click="limitType = 'Market'"><v-list-item-title>Market</v-list-item-title></v-list-item>
               <v-list-item @click="limitType = 'Limit'"><v-list-item-title>Limit</v-list-item-title></v-list-item>
               <v-divider></v-divider>
-              <v-list-item><v-list-item-title>Merge</v-list-item-title></v-list-item>
+              <v-list-item @click="openMergeDialog"><v-list-item-title>Merge</v-list-item-title></v-list-item>
               <v-list-item><v-list-item-title>Split</v-list-item-title></v-list-item>
             </v-list>
           </v-menu>
@@ -444,7 +444,7 @@
                 <v-list-item @click="limitType = 'Market'"><v-list-item-title>Market</v-list-item-title></v-list-item>
                 <v-list-item @click="limitType = 'Limit'"><v-list-item-title>Limit</v-list-item-title></v-list-item>
                 <v-divider></v-divider>
-                <v-list-item><v-list-item-title>Merge</v-list-item-title></v-list-item>
+                <v-list-item @click="openMergeDialog"><v-list-item-title>Merge</v-list-item-title></v-list-item>
                 <v-list-item><v-list-item-title>Split</v-list-item-title></v-list-item>
               </v-list>
             </v-menu>
@@ -549,6 +549,44 @@
       </v-sheet>
     </v-bottom-sheet>
   </template>
+
+  <!-- Merge shares dialog（与桌面/移动端分支并列，始终挂载才能响应 openMergeDialog） -->
+  <v-dialog v-model="mergeDialogOpen" max-width="440" persistent content-class="merge-dialog" transition="dialog-transition">
+    <v-card class="merge-dialog-card" rounded="lg">
+      <div class="merge-dialog-header">
+        <h3 class="merge-dialog-title">Merge shares</h3>
+        <v-btn icon variant="text" size="small" class="merge-dialog-close" @click="mergeDialogOpen = false">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </div>
+      <v-card-text class="merge-dialog-body">
+        <p class="merge-dialog-desc">
+          Merge a share of Yes and No to get 1 USDC. You can do this to save cost when trying to get rid of a position.
+        </p>
+        <div class="merge-amount-row">
+          <label class="merge-amount-label">Amount</label>
+          <v-text-field
+            v-model.number="mergeAmount"
+            type="number"
+            min="0"
+            hide-details
+            density="compact"
+            variant="outlined"
+            class="merge-amount-input"
+          />
+        </div>
+        <p class="merge-available">
+          Available shares: {{ availableMergeShares }}
+          <button type="button" class="merge-max-link" @click="setMergeMax">Max</button>
+        </p>
+      </v-card-text>
+      <v-card-actions class="merge-dialog-actions">
+        <v-btn color="primary" variant="flat" block class="merge-submit-btn" @click="submitMerge">
+          Merge Shares
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script setup lang="ts">
@@ -565,6 +603,21 @@ const props = withDefaults(
 // 移动端：底部栏与弹出层
 const sheetOpen = ref(false)
 
+// Merge shares dialog
+const mergeDialogOpen = ref(false)
+const mergeAmount = ref(0)
+const availableMergeShares = ref(0)
+function openMergeDialog() {
+  mergeAmount.value = 0
+  mergeDialogOpen.value = true
+}
+function setMergeMax() {
+  mergeAmount.value = availableMergeShares.value
+}
+function submitMerge() {
+  mergeDialogOpen.value = false
+}
+
 const yesPriceCents = computed(() => 19)
 const noPriceCents = computed(() => 82)
 
@@ -1137,4 +1190,92 @@ function submitOrder() {
     font-size: 14px;
   }
 }
+
+/* Merge shares dialog */
+.merge-dialog-card {
+  padding: 0;
+  overflow: hidden;
+}
+
+.merge-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 20px 0;
+}
+
+.merge-dialog-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #111827;
+  margin: 0;
+}
+
+.merge-dialog-close {
+  color: #6b7280;
+}
+
+.merge-dialog-body {
+  padding: 16px 20px 8px;
+}
+
+.merge-dialog-desc {
+  font-size: 14px;
+  color: #374151;
+  line-height: 1.5;
+  margin: 0 0 20px;
+}
+
+.merge-amount-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.merge-amount-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+  min-width: 60px;
+}
+
+.merge-amount-input {
+  flex: 1;
+  max-width: 160px;
+}
+
+.merge-amount-input :deep(.v-field) {
+  font-size: 14px;
+}
+
+.merge-available {
+  font-size: 13px;
+  color: #6b7280;
+  margin: 0;
+}
+
+.merge-max-link {
+  color: #2563eb;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 4px;
+  font-size: 13px;
+}
+
+.merge-max-link:hover {
+  text-decoration: underline;
+}
+
+.merge-dialog-actions {
+  padding: 16px 20px 20px;
+  padding-top: 8px;
+}
+
+.merge-submit-btn {
+  text-transform: none;
+  font-weight: 600;
+}
 </style>
\ No newline at end of file