feat(充值代理消息页): 使用新的头部组件，对接语言切换功能并调整布局

src/locales/ar.json

@@ -196,5 +196,14 @@
   "total_recharge": "إجمالي إعادة الشحن",
   "total_expenditure": "إجمالي الإنفاق",
   "coins": "عملات",
-  "no_selling_records_yet": "لا توجد سجلات بيع حتى الآن"
+  "no_selling_records_yet": "لا توجد سجلات بيع حتى الآن",
+
+  "users_message": "رسالة المستخدم",
+  "no_messages": "لا توجد رسائل",
+  "agree": "موافقة",
+  "refuse": "رفض",
+  "unknown_user": "مستخدم غير معروف",
+  "approved_application": "تمت الموافقة على طلب {name}",
+  "rejected_application": "تم رفض طلب {name}",
+  "operation_failed": "فشلت العملية، يرجى المحاولة مرة أخرى"
 }

src/locales/en.json

@@ -196,5 +196,14 @@
   "total_recharge": "Total recharge",
   "total_expenditure": "Total expenditure",
   "coins": "coins",
-  "no_selling_records_yet": "No selling records yet"
+  "no_selling_records_yet": "No selling records yet",
+
+  "users_message": "User's message",
+  "no_messages": "No messages",
+  "agree": "Agree",
+  "refuse": "Refuse",
+  "unknown_user": "Unknown User",
+  "approved_application": "Approved {name}'s application",
+  "rejected_application": "Rejected {name}'s application",
+  "operation_failed": "Operation failed, please try again"
 }

src/locales/zh.json

@@ -196,5 +196,14 @@
   "total_recharge": "总充值",
   "total_expenditure": "总支出",
   "coins": "金币",
-  "no_selling_records_yet": "暂无销售记录"
+  "no_selling_records_yet": "暂无销售记录",
+
+  "users_message": "用户消息",
+  "no_messages": "暂无消息",
+  "agree": "同意",
+  "refuse": "拒绝",
+  "unknown_user": "未知用户",
+  "approved_application": "已批准 {name} 的申请",
+  "rejected_application": "已拒绝 {name} 的申请",
+  "operation_failed": "操作失败，请重试"
 }

src/views/MessageView.vue

@@ -1,11 +1,18 @@
 <template>
   <div class="message gradient-background-circles">
-    <MobileHeader title="User's message" />
+    <!-- 使用 GeneralHeader 替换 MobileHeader -->
+    <GeneralHeader
+      :title="t('users_message')"
+      :isHomePage="false"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
 
     <div class="content">
       <div v-if="loading" class="loading-state">
         <div class="loading-spinner"></div>
-        <p>Loading messages...</p>
+        <p>{{ t('loading') }}...</p>
       </div>
 
       <div v-else class="message-list">
@@ -16,20 +23,26 @@
               <div v-else>{{ message.name?.charAt(0) || 'U' }}</div>
             </div>
             <div class="user-details">
-              <h4>{{ message.name || 'Unknown User' }}</h4>
+              <h4>{{ message.name || t('unknown_user') }}</h4>
-              <p>ID: {{ message.account || message.userId }}</p>
+              <p>
+                <span style="display: flex; align-items: center">
+                  <span>ID</span>
+                  <span style="margin: 0 2px">:</span>
+                  <span>{{ message.account || message.userId }}</span>
+                </span>
+              </p>
             </div>
           </div>
           <div class="action-buttons">
-            <button class="agree-btn" @click="handleAgree(message)">Agree</button>
+            <button class="agree-btn" @click="handleAgree(message)">{{ t('agree') }}</button>
-            <button class="refuse-btn" @click="handleRefuse(message)">Refuse</button>
+            <button class="refuse-btn" @click="handleRefuse(message)">{{ t('refuse') }}</button>
           </div>
         </div>
       </div>
 
       <div v-if="!loading && messages.length === 0" class="empty-state">
         <div class="empty-icon">📨</div>
-        <p>No messages</p>
+        <p>{{ t('no_messages') }}</p>
       </div>
     </div>
   </div>
@@ -37,15 +50,20 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
-import MobileHeader from '../components/MobileHeader.vue'
+import GeneralHeader from '../components/GeneralHeader.vue'
 import { getApplyRecord } from '../api/teamBill.js'
 import { processUserApply } from '../api/wallet.js'
 import { getTeamId } from '@/utils/userStore.js'
 import { showError, showSuccess, showWarning } from '@/utils/toast.js'
 import { formatUTCTime } from '@/utils/utcFormat.js'
+import { setDocumentDirection } from '@/locales/i18n'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
 
-const router = useRouter()
 const loading = ref(false)
 const messages = ref([])
 
@@ -100,18 +118,22 @@ const handleAgree = async (message) => {
     })
 
     if (response.status) {
-      showSuccess(`Approved ${message.name}'s application`)
+      showSuccess(
+        t('approved_application', {
+          name: message.name,
+        })
+      )
       // 从列表中移除
       const index = messages.value.findIndex((m) => m.id === message.id)
       if (index > -1) {
         messages.value.splice(index, 1)
       }
     } else {
-      showError('Operation failed, please try again')
+      showError(t('operation_failed'))
     }
   } catch (error) {
     console.error('同意申请失败:', error)
-    showError('Operation failed, please try again')
+    showError(t('operation_failed'))
   }
 }
 
@@ -124,18 +146,22 @@ const handleRefuse = async (message) => {
     })
 
     if (response.status) {
-      showWarning(`Rejected ${message.name}'s application`)
+      showWarning(
+        t('rejected_application', {
+          name: message.name,
+        })
+      )
       // 从列表中移除
       const index = messages.value.findIndex((m) => m.id === message.id)
       if (index > -1) {
         messages.value.splice(index, 1)
       }
     } else {
-      showError('Operation failed, please try again')
+      showError(t('operation_failed'))
     }
   } catch (error) {
     console.error('拒绝申请失败:', error)
-    showError('Operation failed, please try again')
+    showError(t('operation_failed'))
   }
 }
 
@@ -304,4 +330,36 @@ onMounted(() => {
   margin: 0;
   font-size: 16px;
 }
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+/* RTL支持 */
+[dir='rtl'] .user-avatar {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+[dir='rtl'] .user-info {
+  text-align: right;
+}
+
+[dir='rtl'] .action-buttons {
+  flex-direction: row-reverse;
+}
 </style>