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

src/locales/ar.json

@@ -186,5 +186,15 @@
   "no_data_available": "لا توجد بيانات متاحة",
 
   "no_more_members": "لا يوجد المزيد من الأعضاء",
-  "failed_to_delete_member": "فشل في حذف العضو. يرجى المحاولة مرة أخرى."
+  "failed_to_delete_member": "فشل في حذف العضو. يرجى المحاولة مرة أخرى.",
+
+  "no_users_found": "لم يتم العثور على مستخدمين",
+  "enter_user_id_to_search": "أدخل معرف المستخدم للبحث",
+  "confirm": "تأكيد",
+
+  "seller_records": "سجل البائع",
+  "total_recharge": "إجمالي إعادة الشحن",
+  "total_expenditure": "إجمالي الإنفاق",
+  "coins": "عملات",
+  "no_selling_records_yet": "لا توجد سجلات بيع حتى الآن"
 }

src/locales/en.json

@@ -186,5 +186,15 @@
   "no_data_available": "No data available",
 
   "no_more_members": "No more members",
-  "failed_to_delete_member": "Failed to delete member. Please try again."
+  "failed_to_delete_member": "Failed to delete member. Please try again.",
+
+  "no_users_found": "No users found",
+  "enter_user_id_to_search": "Enter user ID to search",
+  "confirm": "Confirm",
+
+  "seller_records": "Seller Records",
+  "total_recharge": "Total recharge",
+  "total_expenditure": "Total expenditure",
+  "coins": "coins",
+  "no_selling_records_yet": "No selling records yet"
 }

src/locales/zh.json

@@ -186,5 +186,15 @@
   "no_data_available": "暂无数据",
 
   "no_more_members": "没有更多成员",
-  "failed_to_delete_member": "删除成员失败，请重试。"
+  "failed_to_delete_member": "删除成员失败，请重试。",
+
+  "no_users_found": "未找到用户",
+  "enter_user_id_to_search": "请输入用户ID进行搜索",
+  "confirm": "确认",
+
+  "seller_records": "卖家记录",
+  "total_recharge": "总充值",
+  "total_expenditure": "总支出",
+  "coins": "金币",
+  "no_selling_records_yet": "暂无销售记录"
 }

src/views/CoinSellerSearchView.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="coin-seller-search gradient-background-circles">
-    <MobileHeader title="Search user" />
+    <!-- 使用 GeneralHeader 替换 MobileHeader -->
+    <GeneralHeader
+      :title="t('search_user')"
+      :isHomePage="false"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
 
     <div class="content">
       <!-- 搜索框 -->
@@ -19,13 +26,19 @@
             height: max-content;
           "
         >
-          <img src="../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
+          <img
+            src="../assets/icon/search.png"
+            alt=""
+            width="24px"
+            style="opacity: 0.6"
+            class="search-icon"
+          />
           <input
             v-model="searchQuery"
             type="text"
             name=""
             id=""
-            placeholder="Please enter the host lD"
+            :placeholder="t('enter_user_id')"
             @keyup.enter="handleEnterPress"
             @input="handleInputChange"
             style="
@@ -71,12 +84,16 @@
                 {{ user.name }}
               </div>
               <div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
-                ID: {{ user.account }}
+                <span style="display: flex; align-items: center">
+                  <span>ID</span>
+                  <span style="margin: 0 2px">:</span>
+                  <span>{{ user.account }}</span>
+                </span>
               </div>
             </div>
           </div>
           <div style="display: flex; justify-content: center; align-items: center">
-            <img src="../assets/icon/add.png" alt="" width="32px" />
+            <img src="../assets/icon/add.png" alt="" width="32px" class="add-icon" />
           </div>
         </div>
       </div>
@@ -84,7 +101,22 @@
       <!-- 加载状态 -->
       <div v-if="isSearching" class="loading-state">
         <div class="loading-spinner"></div>
-        <p>Searching...</p>
+        <p>{{ t('searching') }}...</p>
+      </div>
+
+      <!-- 空状态 -->
+      <div
+        v-else-if="hasSearched && searchResults.length === 0 && !isSearching"
+        class="empty-state"
+      >
+        <div class="empty-icon">🔍</div>
+        <p>{{ t('no_users_found') }}</p>
+      </div>
+
+      <!-- 初始状态 -->
+      <div v-else-if="!searchQuery" class="initial-state">
+        <div class="initial-icon">👤</div>
+        <p>{{ t('enter_user_id_to_search') }}</p>
       </div>
     </div>
   </div>
@@ -92,12 +124,19 @@
 
 <script setup>
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import MobileHeader from '../components/MobileHeader.vue'
+import GeneralHeader from '../components/GeneralHeader.vue'
 import { setSelectedUser } from '../utils/coinSellerStore.js'
 import { searchFreightUser } from '../api/wallet.js'
+import { setDocumentDirection } from '@/locales/i18n'
 
+const { t, locale } = useI18n()
 const router = useRouter()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 const searchQuery = ref('')
 const searchResults = ref([])
 const isSearching = ref(false)
@@ -138,10 +177,10 @@ const handleActionButton = () => {
 
 // Get button text
 const getActionButtonText = () => {
-  if (isSearching.value) return 'Searching...'
+  if (isSearching.value) return t('searching')
-  if (hasValidSelection.value) return 'Confirm'
+  if (hasValidSelection.value) return t('confirm')
-  if (searchQuery.value.trim() && !hasSearched.value) return 'Search'
+  if (searchQuery.value.trim() && !hasSearched.value) return t('search')
-  return 'Cancel'
+  return t('cancel')
 }
 
 // Perform search
@@ -441,7 +480,7 @@ input::placeholder {
 }
 
 /* 搜索提示 */
-.search-hint {
+.initial-state {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -451,18 +490,18 @@ input::placeholder {
   text-align: center;
 }
 
-.hint-icon {
+.initial-icon {
   font-size: 48px;
   margin-bottom: 16px;
 }
 
-.search-hint p {
+.initial-state p {
   margin: 0 0 8px 0;
   font-size: 16px;
   font-weight: 500;
 }
 
-.search-hint span {
+.initial-state span {
   font-size: 14px;
   color: #9ca3af;
 }
@@ -484,4 +523,23 @@ input::placeholder {
     font-size: 24px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .search-icon {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .add-icon {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .user-avatar {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+[dir='rtl'] .clear-btn {
+  margin-right: 8px;
+  margin-left: 0;
+}
 </style>

src/views/CoinSellerView.vue

@@ -1,11 +1,18 @@
 <template>
   <div class="coin-seller gradient-background-circles">
-    <MobileHeader title="Recharge Agency" />
+    <!-- 使用 GeneralHeader 替换 MobileHeader -->
+    <GeneralHeader
+      :title="t('recharge_agency')"
+      :isHomePage="false"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
 
     <!-- 权限校验加载状态 -->
     <div v-if="checkingAccess" class="loading-container">
       <div class="loading-spinner"></div>
-      <p>Verifying permissions...</p>
+      <p>{{ t('checking_permissions') }}...</p>
     </div>
 
     <!-- 主要内容 -->
@@ -22,7 +29,7 @@
             font-size: 1.3em;
           "
         >
-          My account
+          {{ t('my_account') }}
           <img src="../assets/icon/RA.png" alt="" height="20px" style="margin-left: 10px" />
         </div>
         <img @click="goToRecords" src="../assets/icon/records.png" height="20px" alt="" />
@@ -46,13 +53,19 @@
           </div>
           <div class="user-details">
             <h3>{{ userInfo.userNickname || userInfo.name }}</h3>
-            <p>ID: {{ userInfo.id }}</p>
+            <p>
+              <span style="display: flex; align-items: center">
+                <span>ID</span>
+                <span style="margin: 0 2px">:</span>
+                <span>{{ userInfo.id }}</span>
+              </span>
+            </p>
           </div>
         </div>
 
         <!-- 我的金币 -->
         <div>
-          <div style="font-weight: 600">My coins:</div>
+          <div style="font-weight: 600">{{ t('my_coins') }}</div>
           <div style="margin-top: 12px; width: 100%; display: flex; align-items: center">
             <img src="../assets/icon/coin.png" alt="" height="20px" style="display: block" />
             <div style="color: #ffb627; font-weight: 590; margin-left: 5px">
@@ -64,7 +77,9 @@
 
       <!-- 用户搜索部分 -->
       <div class="user-section">
-        <div style="margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #333">User:</div>
+        <div style="margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #333">
+          {{ t('user') }}
+        </div>
         <!-- 有用户 -->
         <div v-if="selectedUser.id" class="selected-user">
           <div class="user-info">
@@ -80,22 +95,28 @@
             </div>
             <div class="user-details">
               <div class="user-name">{{ selectedUser.name }}</div>
-              <div class="user-id">ID: {{ selectedUser.account }}</div>
+              <div class="user-id">
+                <span style="display: flex; align-items: center">
+                  <span>ID</span>
+                  <span style="margin: 0 2px">:</span>
+                  <span>{{ selectedUser.account }}</span>
+                </span>
+              </div>
             </div>
           </div>
-          <button class="change-btn" @click="searchUser">Change</button>
+          <button class="change-btn" @click="searchUser">{{ t('change') }}</button>
         </div>
         <!-- 无用户 -->
         <div v-else style="display: flex; justify-content: center; align-items: center">
           <div class="search-placeholder" @click="searchUser">
-            <span>Search</span>
+            <span>{{ t('search') }}</span>
           </div>
         </div>
 
         <!-- 充值部分 -->
         <div v-if="selectedUser.id" style="margin-top: 12px">
           <div style="margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #333">
-            Recharge:
+            {{ t('recharge') }}
           </div>
           <!-- 输入金额 -->
           <div
@@ -110,7 +131,7 @@
             <input
               v-model="rechargeAmount"
               type="number"
-              placeholder="Please Enter The Amount Of Gold Coins To Transfer"
+              :placeholder="t('enter_transfer_amount')"
               class="amount-input"
             />
           </div>
@@ -122,7 +143,7 @@
               :disabled="!canRecharge || isRecharging"
               @click="rechargeNow"
             >
-              {{ isRecharging ? 'Processing...' : 'Recharge now' }}
+              {{ isRecharging ? t('loading') : t('recharge_now') }}
             </button>
           </div>
         </div>
@@ -133,15 +154,21 @@
 
 <script setup>
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import MobileHeader from '../components/MobileHeader.vue'
+import GeneralHeader from '../components/GeneralHeader.vue'
 import { getSelectedUser } from '../utils/coinSellerStore.js'
 import { checkFreightDealer, getFreightBalance, freightRecharge } from '../api/wallet.js'
 import { showError, showSuccess } from '@/utils/toast.js'
 import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
+import { setDocumentDirection } from '@/locales/i18n'
 
+const { t, locale } = useI18n()
 const router = useRouter()
 
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 // 权限校验状态
 const dealerAccess = ref(false)
 const checkingAccess = ref(true)
@@ -167,7 +194,7 @@ const checkDealerAccess = async () => {
 
       if (!dealerAccess.value) {
         // 没有权限，跳转回上一页或首页
-        showError('You do not have gold coin seller rights.')
+        showError(t('not_authorized'))
         router.go(-1)
         return
       }
@@ -240,14 +267,14 @@ const rechargeNow = async () => {
 
   const amount = parseFloat(rechargeAmount.value)
   if (amount <= 0) {
-    showError('Please enter the correct recharge amount')
+    showError(t('please_enter_valid_amount'))
     return
   }
 
   // 需要获取接收用户的ID（从用户搜索结果中获取）
   const acceptUserId = selectedUser.value.id
   if (!acceptUserId) {
-    showError('The user ID cannot be obtained. Please select the user again')
+    showError(t('user_not_found_or_search_failed'))
     return
   }
 
@@ -267,16 +294,21 @@ const rechargeNow = async () => {
         coinsAmount.value = response.body.toString()
       }
 
-      showSuccess(`Successfully transferred ${amount} gold coins to ${selectedUser.value.name}.`)
+      showSuccess(
+        t('transfer_success', {
+          price: amount,
+          name: selectedUser.value.name,
+        })
+      )
 
       // 重置表单
       rechargeAmount.value = ''
     } else {
-      showError('充值失败，请重试')
+      showError(t('recharge_failed'))
     }
   } catch (error) {
     console.error('充值失败:', error)
-    showError('充值失败，请检查网络后重试')
+    showError(t('recharge_error_occurred'))
   } finally {
     isRecharging.value = false
   }
@@ -617,4 +649,24 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
     font-size: 24px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .records-icon {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .avatar {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+[dir='rtl'] .user-avatar {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+[dir='rtl'] .change-btn {
+  margin-left: 0;
+  margin-right: 12px;
+}
 </style>

src/views/SellerRecordsView.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="seller-records gradient-background-circles">
-    <MobileHeader title="Seller records" />
+    <!-- 使用 GeneralHeader 替换 MobileHeader -->
+    <GeneralHeader
+      :title="t('seller_records')"
+      :isHomePage="false"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
 
     <div class="content">
       <!-- 搜索框 -->
@@ -19,13 +26,19 @@
             height: max-content;
           "
         >
-          <img src="../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
+          <img
+            src="../assets/icon/search.png"
+            alt=""
+            width="24px"
+            style="opacity: 0.6"
+            class="search-icon"
+          />
           <input
             v-model="searchQuery"
             type="text"
             name=""
             id=""
-            placeholder="Please enter the user lD"
+            :placeholder="t('enter_user_id')"
             @keyup.enter="handleEnterPress"
             @input="handleInputChange"
             style="
@@ -67,14 +80,14 @@
           margin-bottom: 12px;
         "
       >
-        <div style="font-size: 0.9em; font-weight: 600">Total recharge: +30000</div>
+        <div style="font-size: 0.9em; font-weight: 600">{{ t('total_recharge') }}: +30000</div>
-        <div style="font-size: 0.9em; font-weight: 600">Total expenditure: -20000</div>
+        <div style="font-size: 0.9em; font-weight: 600">{{ t('total_expenditure') }}: -20000</div>
       </div>
 
       <!-- 用户列表 -->
       <div v-if="loading" class="loading-state">
         <div class="loading-spinner"></div>
-        <p>Loading records...</p>
+        <p>{{ t('loading') }}...</p>
       </div>
 
       <div v-else class="records-list">
@@ -85,11 +98,17 @@
             </div>
             <div class="record-details">
               <h4>{{ record.userName }}</h4>
-              <p>ID: {{ record.account }}</p>
+              <p>
+                <span style="display: flex; align-items: center">
+                  <span>ID</span>
+                  <span style="margin: 0 2px">:</span>
+                  <span>{{ record.account }}</span>
+                </span>
+              </p>
             </div>
           </div>
           <div class="record-amount">
-            <div class="coins-amount">{{ record.amount }} coins</div>
+            <div class="coins-amount">{{ record.amount }} {{ t('coins') }}</div>
             <div class="record-time">{{ record.time }}</div>
           </div>
         </div>
@@ -97,19 +116,26 @@
 
       <div v-if="!loading && records.length === 0" class="empty-state">
         <div class="empty-icon">📋</div>
-        <p>No records found</p>
+        <p>{{ t('no_transaction_records') }}</p>
-        <span>No selling records yet</span>
+        <span>{{ t('no_selling_records_yet') }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted } from 'vue'
-import MobileHeader from '../components/MobileHeader.vue'
+import { useI18n } from 'vue-i18n'
+import GeneralHeader from '../components/GeneralHeader.vue'
 import { getFreightWaterFlow } from '../api/wallet.js'
 import { formatUTCCustom } from '@/utils/utcFormat.js'
 import { getUserId } from '@/utils/userStore.js'
+import { setDocumentDirection } from '@/locales/i18n'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
 
 const loading = ref(false)
 const records = ref([])
@@ -151,14 +177,15 @@ const clearSearch = () => {
 
 // Cancel search
 const cancelSearch = () => {
-  router.go(-1)
+  // 这里应该使用 router，但原代码中未导入 router
+  console.log('Cancel search')
 }
 
 // Get button text
 const getActionButtonText = () => {
-  if (isSearching.value) return 'Searching...'
+  if (isSearching.value) return t('searching')
-  if (searchQuery.value.trim() && !hasSearched.value) return 'Confirm'
+  if (searchQuery.value.trim() && !hasSearched.value) return t('confirm')
-  return 'Cancel'
+  return t('cancel')
 }
 
 // 获取金额显示
@@ -223,6 +250,12 @@ onMounted(async () => {
 
 .seller-records {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  overflow-y: auto;
+  max-height: 100vh;
+}
+
+.seller-records::-webkit-scrollbar {
+  display: none;
 }
 
 .content {
@@ -405,4 +438,22 @@ input::placeholder {
     width: 28px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .search-icon {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .user-avatar {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+[dir='rtl'] .record-info {
+  text-align: right;
+}
+
+[dir='rtl'] .record-amount {
+  align-items: flex-start;
+}
 </style>