feat(转账详情页): 使用新的头部组件，对接语言切换功能并调整布局

src/locales/ar.json

@@ -175,5 +175,10 @@
   "team_not_exist": "الفريق غير موجود أو تم حلّه",
   "request_not_acceptable": "الطلب غير مقبول",
   "something_went_wrong": "حدث خطأ ما، يرجى المحاولة مرة أخرى.",
-  "confirm": "تأكيد"
+  "confirm": "تأكيد",
+
+  "information_details": "تفاصيل المعلومات",
+  "no_transaction_records": "لا توجد سجلات معاملات",
+  "retry": "إعادة المحاولة",
+  "failed_to_load_data": "فشل تحميل البيانات"
 }

src/locales/en.json

@@ -175,5 +175,10 @@
   "team_not_exist": "The team does not exist or has been disbanded",
   "request_not_acceptable": "Request Not Acceptable",
   "something_went_wrong": "Something went wrong, please retry.",
-  "confirm": "Confirm"
+  "confirm": "Confirm",
+
+  "information_details": "Information details",
+  "no_transaction_records": "No transaction records",
+  "retry": "Retry",
+  "failed_to_load_data": "Failed to load data"
 }

src/locales/zh.json

@@ -175,5 +175,10 @@
   "team_not_exist": "团队不存在或已解散",
   "request_not_acceptable": "请求不可接受",
   "something_went_wrong": "出现问题，请重试。",
-  "confirm": "确认"
+  "confirm": "确认",
+
+  "information_details": "信息详情",
+  "no_transaction_records": "无交易记录",
+  "retry": "重试",
+  "failed_to_load_data": "加载数据失败"
 }

src/views/InformationDetailsView.vue

@@ -1,19 +1,26 @@
 <template>
   <div class="information-details gradient-background-circles">
-    <MobileHeader title="Information details" />
+    <!-- 使用 GeneralHeader 替换 MobileHeader -->
+    <GeneralHeader
+      :title="t('information_details')"
+      :showBack="true"
+      :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...</p>
+        <p>{{ t('loading') }}...</p>
       </div>
 
       <!-- 错误状态 -->
       <div v-else-if="error" class="error-state">
         <div class="error-icon">⚠️</div>
         <p>{{ error }}</p>
-        <button @click="fetchData" class="retry-btn">Retry</button>
+        <button @click="fetchData" class="retry-btn">{{ t('retry') }}</button>
       </div>
 
       <!-- 交易记录列表 -->
@@ -50,7 +57,7 @@
       <!-- 空状态 -->
       <div v-if="!loading && !error && transactions.length === 0" class="empty-state">
         <div class="empty-icon">📄</div>
-        <p>No transaction records</p>
+        <p>{{ t('no_transaction_records') }}</p>
       </div>
     </div>
   </div>
@@ -58,9 +65,16 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import MobileHeader from '../components/MobileHeader.vue'
+import { useI18n } from 'vue-i18n'
-import { getWalletDetails, formatDateTime, formatEventDescribe } from '../api/wallet.js'
+import GeneralHeader from '@/components/GeneralHeader.vue'
+import { getWalletDetails } from '../api/wallet.js'
 import { formatUTCTimeClean } from '@/utils/utcFormat.js'
+import { setDocumentDirection } from '@/locales/i18n'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
 
 const transactions = ref([])
 const loading = ref(false)
@@ -107,7 +121,7 @@ const fetchData = async () => {
 
         return {
           id: item.id,
-          eventDescribe: formatEventDescribe(item.eventDescribe),
+          eventDescribe: item.eventDescribe,
           createTime: formatUTCTimeClean(item.createTime),
           amount: amount,
           balance: item.balance,
@@ -124,7 +138,7 @@ const fetchData = async () => {
     }
   } catch (err) {
     console.error('Failed to fetch wallet details:', err)
-    error.value = err.message || 'Failed to load data'
+    error.value = err.message || t('failed_to_load_data')
   } finally {
     loading.value = false
   }
@@ -361,4 +375,13 @@ onMounted(() => {
     font-size: 24px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .transaction-content {
+  flex-direction: row-reverse;
+}
+
+[dir='rtl'] .transaction-info {
+  text-align: right;
+}
 </style>