From 8e2977d404d1122eb2ae6b57771b5bcabe98c72c Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Tue, 7 Apr 2026 22:48:45 +0800
Subject: [PATCH] fix(ui): show icon + text labels in order actions column

---
 frontend/src/views/user/UserOrdersView.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/user/UserOrdersView.vue b/frontend/src/views/user/UserOrdersView.vue
index 48a9bf825c..8515a3b181 100644
--- a/frontend/src/views/user/UserOrdersView.vue
+++ b/frontend/src/views/user/UserOrdersView.vue
@@ -35,12 +35,14 @@
           <span class="text-xs text-gray-500 dark:text-gray-400">{{ formatDate(value) }}</span>
         </template>
         <template #cell-actions="{ row }">
-          <div class="flex items-center gap-1">
-            <button v-if="row.status === 'PENDING'" @click="handleCancel(row.id)" class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20" :title="t('payment.orders.cancel')">
+          <div class="flex items-center gap-2">
+            <button v-if="row.status === 'PENDING'" @click="handleCancel(row.id)" class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20">
               <Icon name="x" size="sm" />
+              <span>{{ t('payment.orders.cancel') }}</span>
             </button>
-            <button v-if="row.status === 'COMPLETED'" @click="openRefundDialog(row)" class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-purple-600 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-purple-900/20" :title="t('payment.orders.requestRefund')">
+            <button v-if="row.status === 'COMPLETED'" @click="openRefundDialog(row)" class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-purple-600 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-purple-900/20">
               <Icon name="dollar" size="sm" />
+              <span>{{ t('payment.orders.requestRefund') }}</span>
             </button>
           </div>
         </template>