From 2a2f823303596d5bffca90fa8a15de1a0e0a47ea Mon Sep 17 00:00:00 2001
From: DaxPay Dev <dev@daxpay.com>
Date: Mon, 20 Jul 2026 10:19:51 +0800
Subject: [PATCH] =?UTF-8?q?refactor(payment):=20=E7=BB=88=E7=AB=AF?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=E6=8A=BD=E5=B1=89=20antdv-next=20API=20?=
 =?UTF-8?q?=E5=8D=87=E7=BA=A7=E4=B8=8E=E8=A7=86=E8=A7=89=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drawer 的 width→size、destroy-on-close→destroy-on-hidden 适配 antdv-next 新 API; a-list 改为手写 flex 卡片布局, 信息层级与可读性更佳。
---
 .../channel/ChannelTerminalBindDrawer.vue     | 43 +++++++++--------
 .../terminal/SystemTerminalBindDrawer.vue     | 46 ++++++++++---------
 2 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/apps/daxpay-admin/src/views/payment/device/terminal/channel/ChannelTerminalBindDrawer.vue b/apps/daxpay-admin/src/views/payment/device/terminal/channel/ChannelTerminalBindDrawer.vue
index 6d8d3d8d5..8cd183274 100644
--- a/apps/daxpay-admin/src/views/payment/device/terminal/channel/ChannelTerminalBindDrawer.vue
+++ b/apps/daxpay-admin/src/views/payment/device/terminal/channel/ChannelTerminalBindDrawer.vue
@@ -5,8 +5,8 @@
 
   import {
     ChannelTerminalApi,
-    TerminalDeviceApi,
     type ChannelTerminalResult,
+    TerminalDeviceApi,
     type TerminalDeviceResult,
   } from '#/api/payment/device/terminal.api';
   import { PermCodes } from '#/constants/perm-codes';
@@ -103,7 +103,7 @@
 </script>
 
 <template>
-  <a-drawer v-model:open="visible" :title="title" :width="640" :destroy-on-close="true">
+  <a-drawer v-model:open="visible" :title="title" :size="640" :destroy-on-hidden="true">
     <a-spin :spinning="loading">
       <div v-if="hasPermission(PermCodes.Channel.Merchant.MANAGE)" class="mb-4 flex gap-2">
         <a-select
@@ -125,24 +125,27 @@
 
       <div class="mb-2 font-medium">{{ $t('payment.device.terminal.boundSystem') }}</div>
       <a-empty v-if="boundList.length === 0" :description="$t('payment.device.terminal.noBound')" />
-      <a-list v-else :data-source="boundList" bordered>
-        <template #renderItem="{ item }">
-          <a-list-item>
-            <a-list-item-meta :title="item.name" :description="item.terminalNo" />
-            <template #actions>
-              <a-button
-                v-if="hasPermission(PermCodes.Channel.Merchant.MANAGE)"
-                type="link"
-                size="small"
-                danger
-                @click="handleUnbind(item)"
-              >
-                {{ $t('payment.device.terminal.unbind') }}
-              </a-button>
-            </template>
-          </a-list-item>
-        </template>
-      </a-list>
+      <div v-else class="space-y-3">
+        <div
+          v-for="item in boundList"
+          :key="item.terminalNo"
+          class="flex items-center justify-between border-b border-gray-100 py-3 last:border-0"
+        >
+          <div class="min-w-0 flex-1">
+            <div class="truncate font-medium">{{ item.name }}</div>
+            <div class="truncate text-sm text-gray-500">{{ item.terminalNo }}</div>
+          </div>
+          <a-button
+            v-if="hasPermission(PermCodes.Channel.Merchant.MANAGE)"
+            type="link"
+            size="small"
+            danger
+            @click="handleUnbind(item)"
+          >
+            {{ $t('payment.device.terminal.unbind') }}
+          </a-button>
+        </div>
+      </div>
     </a-spin>
   </a-drawer>
 </template>
diff --git a/apps/daxpay-admin/src/views/payment/merchant/terminal/SystemTerminalBindDrawer.vue b/apps/daxpay-admin/src/views/payment/merchant/terminal/SystemTerminalBindDrawer.vue
index 3b17fffa4..b0535f4a3 100644
--- a/apps/daxpay-admin/src/views/payment/merchant/terminal/SystemTerminalBindDrawer.vue
+++ b/apps/daxpay-admin/src/views/payment/merchant/terminal/SystemTerminalBindDrawer.vue
@@ -104,7 +104,7 @@
 </script>
 
 <template>
-  <a-drawer v-model:open="visible" :title="title" :width="640" :destroy-on-close="true">
+  <a-drawer v-model:open="visible" :title="title" :size="640" :destroy-on-hidden="true">
     <a-spin :spinning="loading">
       <div v-if="hasPermission(PermCodes.Merchant.Terminal.MANAGE)" class="mb-4 flex gap-2">
         <a-select
@@ -126,27 +126,29 @@
 
       <div class="mb-2 font-medium">{{ $t('payment.device.terminal.boundChannel') }}</div>
       <a-empty v-if="boundList.length === 0" :description="$t('payment.device.terminal.noBound')" />
-      <a-list v-else :data-source="boundList" bordered>
-        <template #renderItem="{ item }">
-          <a-list-item>
-            <a-list-item-meta
-              :title="item.name"
-              :description="`${item.channelMchNo || '-'} · ${item.type || '-'} · ${item.outTerminalNo || '-'}`"
-            />
-            <template #actions>
-              <a-button
-                v-if="hasPermission(PermCodes.Merchant.Terminal.MANAGE)"
-                type="link"
-                size="small"
-                danger
-                @click="handleUnbind(item)"
-              >
-                {{ $t('payment.device.terminal.unbind') }}
-              </a-button>
-            </template>
-          </a-list-item>
-        </template>
-      </a-list>
+      <div v-else class="space-y-3">
+        <div
+          v-for="(item, index) in boundList"
+          :key="item.id || index"
+          class="flex items-center justify-between border-b border-gray-100 py-3 last:border-0"
+        >
+          <div class="min-w-0 flex-1">
+            <div class="truncate font-medium">{{ item.name }}</div>
+            <div class="truncate text-sm text-gray-500">
+              {{ `${item.channelMchNo || '-'} · ${item.type || '-'} · ${item.outTerminalNo || '-'}` }}
+            </div>
+          </div>
+          <a-button
+            v-if="hasPermission(PermCodes.Merchant.Terminal.MANAGE)"
+            type="link"
+            size="small"
+            danger
+            @click="handleUnbind(item)"
+          >
+            {{ $t('payment.device.terminal.unbind') }}
+          </a-button>
+        </div>
+      </div>
     </a-spin>
   </a-drawer>
 </template>