feat(团队成员页): 使用新的头部组件，对接语言切换功能并调整布局

src/locales/ar.json

@@ -183,5 +183,8 @@
   "retry": "إعادة المحاولة",
   "failed_to_load_data": "فشل تحميل البيانات",
 
-  "no_data_available": "لا توجد بيانات متاحة"
+  "no_data_available": "لا توجد بيانات متاحة",
+
+  "no_more_members": "لا يوجد المزيد من الأعضاء",
+  "failed_to_delete_member": "فشل في حذف العضو. يرجى المحاولة مرة أخرى."
 }

src/locales/en.json

@@ -183,5 +183,8 @@
   "retry": "Retry",
   "failed_to_load_data": "Failed to load data",
 
-  "no_data_available": "No data available"
+  "no_data_available": "No data available",
+
+  "no_more_members": "No more members",
+  "failed_to_delete_member": "Failed to delete member. Please try again."
 }

src/locales/zh.json

@@ -183,5 +183,8 @@
   "retry": "重试",
   "failed_to_load_data": "加载数据失败",
 
-  "no_data_available": "暂无数据"
+  "no_data_available": "暂无数据",
+
+  "no_more_members": "没有更多成员",
+  "failed_to_delete_member": "删除成员失败，请重试。"
 }

src/views/TeamMemberView.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="team-member gradient-background-circles">
-    <MobileHeader :title="`Team Member (${membersTotal})`" />
+    <!-- 使用 GeneralHeader 替换 MobileHeader -->
+    <GeneralHeader
+      :title="`${t('team_member')} (${membersTotal})`"
+      :isHomePage="false"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
 
     <div class="content">
       <!-- 搜索框 -->
@@ -24,7 +31,7 @@
             type="text"
             name=""
             id=""
-            placeholder="Please enter the host lD"
+            :placeholder="t('enter_host_id')"
             style="
               width: 100%;
               outline: none;
@@ -36,7 +43,7 @@
             v-model="targetUserId"
           />
         </div>
-        <div style="font-weight: 600">Cancel</div>
+        <div style="font-weight: 600">{{ t('cancel') }}</div>
       </div>
 
       <!-- 团队信息 -->
@@ -54,19 +61,19 @@
       >
         <div style="display: flex">
           <div style="display: flex; flex-direction: column; align-items: center; gap: 5px">
-            <div class="team-des-title">Agency number</div>
+            <div class="team-des-title">{{ t('agency_number') }}</div>
             <div class="team-des-value">{{ agentMonthTarget.agentQuantity }}</div>
           </div>
         </div>
 
         <div style="display: flex; flex-direction: column; align-items: center; gap: 5px">
-          <div class="team-des-title">Team target</div>
+          <div class="team-des-title">{{ t('team_target') }}</div>
           <div class="team-des-value">${{ agentMonthTarget.thisMonthTotalTarget }}</div>
         </div>
 
         <div style="display: flex; justify-content: flex-end">
           <div style="display: flex; flex-direction: column; align-items: center; gap: 5px">
-            <div class="team-des-title">My</div>
+            <div class="team-des-title">{{ t('my') }}</div>
             <div class="team-des-value">{{ agentMonthTarget.foreverPercentage }}%</div>
           </div>
         </div>
@@ -75,7 +82,7 @@
       <!-- 加载状态 -->
       <div v-if="loading" class="loading-container">
         <div class="loading-spinner"></div>
-        <p>Loading members...</p>
+        <p>{{ t('loading') }}...</p>
       </div>
 
       <!-- 成员列表 -->
@@ -147,7 +154,11 @@
                 {{ member.userProfile.userNickname }}
               </div>
               <div style="color: rgba(0, 0, 0, 0.4); font-weight: 500">
-                ID: {{ formatAccount(member.userProfile) }}
+                <span style="display: flex; align-items: center">
+                  <span>ID</span>
+                  <span style="margin: 0 2px">:</span>
+                  <span>{{ formatAccount(member.userProfile) }}</span>
+                </span>
               </div>
             </div>
           </div>
@@ -172,7 +183,7 @@
                 "
                 v-if="member.hostQuantity"
               >
-                Host number:{{ member.hostQuantity }}
+                {{ t('host_count') }}:{{ member.hostQuantity }}
               </div>
             </div>
           </div>
@@ -192,12 +203,12 @@
           <!-- 加载更多状态 -->
           <div v-if="loadingMore" class="loading-more">
             <div class="loading-spinner small"></div>
-            <p>Loading more...</p>
+            <p>{{ t('loading') }}...</p>
           </div>
 
           <!-- 没有更多数据提示 -->
           <div v-else-if="noMoreData && members.length > 0" class="no-more-data">
-            <p>No more members</p>
+            <p>{{ t('no_more_members') }}</p>
           </div>
         </div>
 
@@ -214,19 +225,19 @@
     <div v-if="showDeleteModal" class="modal-overlay" @click="closeDeleteModal">
       <div class="delete-modal-content" @click.stop>
         <div class="modal-header">
-          <h3>Tips</h3>
+          <h3>{{ t('tips') }}</h3>
         </div>
 
         <div class="modal-body">
           <p>
-            Are you sure you want to remove ID:{{ formatAccount(memberToDelete.userProfile) }} from
-            the team?
+            {{ t('confirm_remove_member_start') }}{{ formatAccount(memberToDelete.userProfile)
+            }}{{ t('confirm_remove_member_end') }}
           </p>
         </div>
 
         <div class="modal-actions">
-          <button class="cancel-btn" @click="closeDeleteModal">Cancel</button>
-          <button class="confirm-btn" @click="confirmDelete">Confirm</button>
+          <button class="cancel-btn" @click="closeDeleteModal">{{ t('cancel') }}</button>
+          <button class="confirm-btn" @click="confirmDelete">{{ t('confirm') }}</button>
         </div>
       </div>
     </div>
@@ -235,8 +246,9 @@
 
 <script setup>
 import { ref, onMounted, nextTick, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter, useRoute } from 'vue-router'
-import MobileHeader from '../components/MobileHeader.vue'
+import GeneralHeader from '../components/GeneralHeader.vue'
 import {
   getTeamMembers,
   getBdAgentList,
@@ -245,8 +257,15 @@ import {
 } from '../api/teamBill.js'
 import { getTeamId } from '@/utils/userStore.js'
 import { showError } from '@/utils/toast.js'
+import { setDocumentDirection } from '@/locales/i18n'
 
+const { t, locale } = useI18n()
 const route = useRoute()
+const router = useRouter()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 const loading = ref(false)
 const members = ref([])
 const membersTotal = ref(0)
@@ -336,7 +355,7 @@ const fetchTeamMembers = async (isLoadMore = false) => {
     if (!isLoadMore) {
       members.value = []
     }
-    showError('Failed to load team members')
+    showError(t('failed_to_load_data'))
   } finally {
     loading.value = false
     loadingMore.value = false
@@ -393,7 +412,7 @@ const confirmDelete = async () => {
     closeDeleteModal()
   } catch (error) {
     console.error('Failed to delete member:', error)
-    showError('Failed to delete member. Please try again.')
+    showError(t('failed_to_delete_member'))
   } finally {
     deletingMemberId.value = null
   }
@@ -782,4 +801,13 @@ input::placeholder {
     font-size: 24px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .search-icon {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .trash-icon {
+  transform: scaleX(-1);
+}
 </style>