From 7a91f448c065c31dd9a4830c7adf4d217b0c8120 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 31 Oct 2025 21:07:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8=E6=96=B0=E7=9A=84?=
 =?UTF-8?q?=E5=A4=B4=E9=83=A8=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=AF=B9=E6=8E=A5?=
 =?UTF-8?q?=E8=AF=AD=E8=A8=80=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD=E5=B9=B6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/historySalary.vue   |  84 ++++++++++++++++------
 src/locales/ar.json                |   1 +
 src/locales/en.json                |   1 +
 src/locales/zh.json                |   1 +
 src/views/BDCenterView.vue         |  82 +++++++++++++++------
 src/views/BDLeaderCenter/index.vue | 111 +++++++++++++++++++----------
 6 files changed, 199 insertions(+), 81 deletions(-)

diff --git a/src/components/historySalary.vue b/src/components/historySalary.vue
index 3f5bae1..2dd614e 100644
--- a/src/components/historySalary.vue
+++ b/src/components/historySalary.vue
@@ -1,22 +1,13 @@
 <template>
   <div style="position: relative; width: 100%">
-    <img :src="bgUrl" alt="" width="100%" style="display: block" />
-    <div
-      style="
-        width: 48%;
-        height: 40%;
-        position: absolute;
-        top: 0;
-        right: 3%;
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-      "
-    >
+    <img :src="bgUrl" alt="" width="100%" style="display: block" class="flipImg" />
+    <div class="status">
       <div
         style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
       >
-        <div style="color: #fff; font-weight: 600" :style="{ fontSize }">{{ type }}</div>
+        <div style="color: #fff; font-weight: 600" :style="{ fontSize }">
+          {{ getTypeText(type) }}
+        </div>
       </div>
     </div>
     <div style="position: absolute; inset: 0; padding: 3% 4%">
@@ -25,20 +16,21 @@
       >
         <slot name="content"></slot>
       </div>
-      <div
-        v-if="type == 'Completed'"
-        class="moreBt"
-        style="position: absolute; top: 40%; right: 4%; color: #bb92ff; font-weight: 500"
-        @click="btMore"
-      >
-        More >
-      </div>
+      <div v-if="type == 'Completed'" class="moreBt" @click="btMore">{{ t('more') }}</div>
     </div>
   </div>
 </template>
 
 <script setup>
 import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { setDocumentDirection } from '@/locales/i18n'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 const progress = new URL('@/assets/images/BDCenter/progress.png', import.meta.url).href
 const completed = new URL('@/assets/images/BDCenter/completed.png', import.meta.url).href
 const progressLong = new URL('@/assets/images/BDCenter/progressLong.png', import.meta.url).href
@@ -91,6 +83,24 @@ watch(
   },
   { immediate: true }
 )
+
+// 根据状态文本返回翻译后的文本
+const getTypeText = (type) => {
+  console.log('type:', type)
+
+  switch (type) {
+    case 'In Progress':
+      return t('in_progress')
+    case 'Completed':
+      return t('completed')
+    case 'Out of account':
+      return t('out_of_account')
+    case 'Pending':
+      return t('pending')
+    default:
+      return type
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -110,6 +120,36 @@ watch(
 
 .moreBt {
   font-size: 1em;
+  position: absolute;
+  top: 40%;
+  right: 4%;
+  color: #bb92ff;
+  font-weight: 500;
+}
+
+.status {
+  width: 48%;
+  height: 40%;
+  position: absolute;
+  top: 0;
+  right: 3%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+[dir='rtl'] .status {
+  right: auto;
+  left: 3%;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .moreBt {
+  right: auto;
+  left: 4%;
 }
 
 @media screen and (max-width: 360px) {
diff --git a/src/locales/ar.json b/src/locales/ar.json
index 1472ca5..e76f3f9 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -95,6 +95,7 @@
   "succeed": "ينجح",
   "seller_records": "سجل البائع",
   "bd_center": "مركز bd",
+  "bd_leader_center": "مركز القيادة BD",
   "total_team_salary": "إجمالي رواتب الفريق：",
   "last_month": "الشهر الماضي",
   "this_month": "هذا الشهر",
diff --git a/src/locales/en.json b/src/locales/en.json
index e43e3b1..29f22a5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -95,6 +95,7 @@
   "succeed": "Succeed",
   "seller_records": "Seller Records",
   "bd_center": "BD Center",
+  "bd_leader_center": "BD Leader Center",
   "total_team_salary": "Total team salary：",
   "last_month": "Last month：",
   "this_month": "This month：",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 975f85f..523edef 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -95,6 +95,7 @@
   "succeed": "成功",
   "seller_records": "卖家记录",
   "bd_center": "BD中心",
+  "bd_leader_center": "BD中心",
   "total_team_salary": "团队总工资",
   "last_month": "上个月",
   "this_month": "这个月",
diff --git a/src/views/BDCenterView.vue b/src/views/BDCenterView.vue
index 5879190..6e5a1cb 100644
--- a/src/views/BDCenterView.vue
+++ b/src/views/BDCenterView.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="bd-center gradient-background-circles">
     <!-- 顶部导航 -->
-    <MobileHeader title="BD Center" :isHomePage="true" />
+    <GeneralHeader
+      :title="t('bd_center')"
+      :isHomePage="true"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
 
     <!-- 主要内容 -->
     <div
@@ -26,7 +32,7 @@
         <!-- APP连接状态指示 -->
         <div v-if="isInApp() && !appConnected" class="app-status connecting">
           <div class="status-indicator"></div>
-          <span>正在连接APP...</span>
+          <span>{{ t('loading') }}...</span>
         </div>
 
         <!-- 用户信息 -->
@@ -86,7 +92,7 @@
           @click="gotoIncome"
         >
           <span style="font-weight: 600; color: #1f2937">
-            Available income:${{ salaryInfo.currentSalary }}
+            {{ t('available_salaries') }} ${{ salaryInfo.currentSalary }}
           </span>
           <img src="../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
         </div>
@@ -111,7 +117,7 @@
         @click="goToInviteAgency"
       >
         <div style="display: flex; justify-content: space-between; align-items: center">
-          <span style="font-weight: 600; color: #1f2937"> Invite User To Become Agency</span>
+          <span style="font-weight: 600; color: #1f2937"> {{ t('invite_become_agent') }}</span>
           <img src="../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
         </div>
       </div>
@@ -144,7 +150,7 @@
           />
         </div>
         <div style="font-size: 0.8em; font-weight: 600">
-          Team total recharge: ${{ BDData.totalRecharge }} Team total salary: ${{
+          {{ t('team_recharge') }}: ${{ BDData.totalRecharge }} {{ t('total_team_salary') }}: ${{
             BDData.totalSalary
           }}
         </div>
@@ -207,12 +213,14 @@
             style="width: 40%; display: flex; flex-direction: column; justify-content: space-around"
           >
             <div style="font-size: 0.8em; font-weight: 500">
-              Salary: ${{ BDInfo.teamSalaryAmount }}
+              {{ t('salary') }}: ${{ BDInfo.teamSalaryAmount }}
             </div>
             <div style="font-size: 0.8em; font-weight: 500">
-              Recharge: ${{ BDInfo.teamRechargeAmount }}
+              {{ t('recharge') }}: ${{ BDInfo.teamRechargeAmount }}
+            </div>
+            <div style="font-size: 0.8em; font-weight: 500">
+              {{ t('host') }}:{{ BDInfo.teamMemberCount }}
             </div>
-            <div style="font-size: 0.8em; font-weight: 500">Host:{{ BDInfo.teamMemberCount }}</div>
           </div>
         </div>
       </div>
@@ -252,10 +260,10 @@
             <div>
               <div style="display: grid; gap: 4px">
                 <div style="font-size: 0.9em; font-weight: 600">
-                  Total income:${{ BDSalary.totalIncome }}
+                  {{ t('total_income') }}: ${{ BDSalary.totalIncome }}
                 </div>
                 <div style="font-size: 0.9em; font-weight: 600">
-                  Previous period income:${{ BDSalary.previousPeriodIncome }}
+                  {{ t('last_month') }}: ${{ BDSalary.previousPeriodIncome }}
                 </div>
               </div>
             </div>
@@ -272,9 +280,13 @@
               >
                 <template v-if="income.statusText == 'In Progress'" v-slot:content>
                   <div>{{ income.billTitle }}</div>
-                  <div style="font-size: 0.9em">Number of teams: {{ income.agencyNumber }}</div>
+                  <div style="font-size: 0.9em">
+                    {{ t('agency_number') }}: {{ income.agencyNumber }}
+                  </div>
                   <div style="display: flex; justify-content: space-between">
-                    <div style="font-size: 0.9em">Team salary: ${{ income.teamSalaryAmount }}</div>
+                    <div style="font-size: 0.9em">
+                      {{ t('team_salary') }}: ${{ income.teamSalaryAmount }}
+                    </div>
                     <div style="font-size: 0.9em">
                       BD income (salary): ${{ income.bdIncomeSalary || 0 }} ({{
                         income.bdRatioSalary || 0
@@ -283,7 +295,7 @@
                   </div>
                   <div style="display: flex; justify-content: space-between">
                     <div style="font-size: 0.9em">
-                      Team top-up: ${{ income.teamRechargeAmount }}
+                      {{ t('team_recharge') }}: ${{ income.teamRechargeAmount }}
                     </div>
                     <div style="font-size: 0.9em">
                       BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{
@@ -295,10 +307,12 @@
 
                 <template v-else v-slot:content>
                   <div>{{ income.billTitle }}</div>
-                  <div style="font-size: 0.9em">Number Of Teams: {{ income.agencyNumber }}</div>
+                  <div style="font-size: 0.9em">
+                    {{ t('agency_number') }}: {{ income.agencyNumber }}
+                  </div>
                   <div style="display: flex; justify-content: space-between">
                     <div style="font-size: 0.9em">
-                      Team top-up: ${{ income.teamRechargeAmount }}
+                      {{ t('team_recharge') }}: ${{ income.teamRechargeAmount }}
                     </div>
                     <div style="font-size: 0.9em">
                       BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{
@@ -329,9 +343,8 @@
         >
           <div style="font-weight: 600">{{ BDSalaryMore.period }}</div>
           <div style="font-size: 0.7em; font-weight: 600">
-            Team total recharge: ${{ BDSalaryMore.teamTotalRecharge }}, Team total salary: ${{
-              BDSalaryMore.teamTotalSalary
-            }}
+            {{ t('team_recharge') }}: ${{ BDSalaryMore.teamTotalRecharge }},
+            {{ t('total_team_salary') }}: ${{ BDSalaryMore.teamTotalSalary }}
           </div>
           <div
             v-for="member in BDSalaryMore.memberDetails"
@@ -394,9 +407,15 @@
                 justify-content: space-around;
               "
             >
-              <div style="font-size: 0.8em; font-weight: 500">Salary: ${{ member.salary }}</div>
-              <div style="font-size: 0.8em; font-weight: 500">Recharge: ${{ member.recharge }}</div>
-              <div style="font-size: 0.8em; font-weight: 500">Host:{{ member.hostCount }}</div>
+              <div style="font-size: 0.8em; font-weight: 500">
+                {{ t('salary') }}: ${{ member.salary }}
+              </div>
+              <div style="font-size: 0.8em; font-weight: 500">
+                {{ t('recharge') }}: ${{ member.recharge }}
+              </div>
+              <div style="font-size: 0.8em; font-weight: 500">
+                {{ t('host') }}:{{ member.hostCount }}
+              </div>
             </div>
           </div>
         </div>
@@ -407,8 +426,9 @@
 
 <script setup>
 import { computed, onMounted, ref } 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 { getAgentMonthLastTarget, getAgentMonthTarget, getBdAgentList } from '@/api/teamBill.js'
 import { getBdMemberBillList, getBdHistory, getBdHistoryMore } from '@/api/bdCenter.js'
 import { getTeamId } from '@/utils/userStore.js'
@@ -417,9 +437,14 @@ import { isInApp } from '@/utils/appBridge.js'
 import { clearSelectedPayee } from '@/utils/payeeStore.js'
 import maskLayer from '@/components/MaskLayer.vue'
 import historySalary from '@/components/historySalary.vue'
+import { setDocumentDirection } from '@/locales/i18n'
 
+const { t, locale } = useI18n()
 const router = useRouter()
 
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 // 当前身份
 const teamMemberCount = ref(0)
 const showHistory = ref(false) //历史弹窗
@@ -541,6 +566,9 @@ onMounted(() => {
 .bd-center {
   max-height: 100vh;
   overflow-y: auto;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  background-color: #ffffff;
+  background-image: url(../assets/images/secondBg.png);
 }
 
 .bd-center::-webkit-scrollbar {
@@ -612,4 +640,14 @@ onMounted(() => {
     font-size: 32px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .avatar {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+[dir='rtl'] .user-info {
+  text-align: right;
+}
 </style>
diff --git a/src/views/BDLeaderCenter/index.vue b/src/views/BDLeaderCenter/index.vue
index 2b619b7..9425507 100644
--- a/src/views/BDLeaderCenter/index.vue
+++ b/src/views/BDLeaderCenter/index.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="bd-center gradient-background-circles">
     <!-- 顶部导航 -->
-    <MobileHeader title="BD Leader Center" :isHomePage="true" />
+    <GeneralHeader
+      :title="t('bd_leader_center')"
+      :isHomePage="true"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
 
     <!-- 主要内容 -->
     <div
@@ -26,7 +32,7 @@
         <!-- APP连接状态指示 -->
         <div v-if="isInApp() && !appConnected" class="app-status connecting">
           <div class="status-indicator"></div>
-          <span>正在连接APP...</span>
+          <span>{{ t('loading') }}...</span>
         </div>
 
         <div style="display: flex; align-items: center">
@@ -81,7 +87,7 @@
           @click="gotoIncome"
         >
           <span style="font-weight: 600; color: #1f2937">
-            Available income: ${{ salaryInfo.currentSalary }}
+            {{ t('available_salaries') }} ${{ salaryInfo.currentSalary }}
           </span>
           <img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
         </div>
@@ -103,7 +109,7 @@
           @click="goToInviteAgency"
         >
           <div style="display: flex; justify-content: space-between; align-items: center">
-            <span style="font-weight: 600; color: #1f2937"> Invite User To Become Agency</span>
+            <span style="font-weight: 600; color: #1f2937"> {{ t('invite_become_agent') }}</span>
             <img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
           </div>
         </div>
@@ -122,7 +128,9 @@
           @click="goToInviteBD"
         >
           <div style="display: flex; justify-content: space-between; align-items: center">
-            <span style="font-weight: 600; color: #1f2937"> Invite User To Become BD</span>
+            <span style="font-weight: 600; color: #1f2937">
+              {{ t('invite') }} User To Become BD</span
+            >
             <img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
           </div>
         </div>
@@ -159,7 +167,7 @@
             {{ tab.name }}
           </button>
           <!-- 移动下划线 -->
-          <div
+          <!-- <div
             :style="{
               position: 'absolute',
               bottom: '0',
@@ -169,7 +177,7 @@
               width: `${100 / tabs.length}%`,
               left: `${(activeTab - 1) * (100 / tabs.length)}%`,
             }"
-          ></div>
+          ></div> -->
         </div>
 
         <!-- BD 标签内容 -->
@@ -184,7 +192,7 @@
             />
           </div>
           <div style="font-size: 0.8em; font-weight: 600; margin-bottom: 12px">
-            Team total recharge: ${{ BDData.totalRecharge }}, Team total salary: ${{
+            {{ t('team_recharge') }}: ${{ BDData.totalRecharge }}, {{ t('total_team_salary') }}: ${{
               BDData.totalSalary
             }}
           </div>
@@ -251,13 +259,13 @@
                 "
               >
                 <div style="font-size: 0.8em; font-weight: 500">
-                  Salary: ${{ BDInfo.teamSalaryAmount }}
+                  {{ t('salary') }}: ${{ BDInfo.teamSalaryAmount }}
                 </div>
                 <div style="font-size: 0.8em; font-weight: 500">
-                  Recharge: ${{ BDInfo.teamRechargeAmount }}
+                  {{ t('recharge') }}: ${{ BDInfo.teamRechargeAmount }}
                 </div>
                 <div style="font-size: 0.8em; font-weight: 500">
-                  Host:{{ BDInfo.teamMemberCount }}
+                  {{ t('host') }}:{{ BDInfo.teamMemberCount }}
                 </div>
               </div>
             </div>
@@ -276,9 +284,8 @@
             />
           </div>
           <div style="font-size: 0.8em; font-weight: 600; margin-bottom: 12px">
-            Team total recharge: ${{ BDLeaderData.totalRecharge || 0 }}, Team total salary: ${{
-              BDLeaderData.totalSalary || 0
-            }}
+            {{ t('team_recharge') }}: ${{ BDLeaderData.totalRecharge || 0 }},
+            {{ t('total_team_salary') }}: ${{ BDLeaderData.totalSalary || 0 }}
           </div>
 
           <!-- 团队成员列表 -->
@@ -343,10 +350,10 @@
                 "
               >
                 <div style="font-size: 0.8em; font-weight: 500">
-                  Team Salary: ${{ BDInfo.teamSalaryAmount }}
+                  {{ t('team_salary') }}: ${{ BDInfo.teamSalaryAmount }}
                 </div>
                 <div style="font-size: 0.8em; font-weight: 500">
-                  Agencies: {{ BDInfo.teamMemberCount }}
+                  {{ t('agency') }}: {{ BDInfo.teamMemberCount }}
                 </div>
               </div>
             </div>
@@ -391,12 +398,12 @@
             <div>
               <div style="display: grid; gap: 4px">
                 <div style="font-size: 0.9em; font-weight: 600">
-                  Total income: ${{
+                  {{ t('total_income') }}: ${{
                     currentHistoryType === 'bd' ? BDSalary.totalIncome : BDLeaderSalary.totalIncome
                   }}
                 </div>
                 <div style="font-size: 0.9em; font-weight: 600">
-                  Previous period income: ${{
+                  {{ t('last_month') }}: ${{
                     currentHistoryType === 'bd'
                       ? BDSalary.previousPeriodIncome
                       : BDLeaderSalary.previousPeriodIncome
@@ -419,10 +426,12 @@
                 >
                   <template v-if="income.statusText == 'In Progress'" v-slot:content>
                     <div>{{ income.billTitle }}</div>
-                    <div style="font-size: 0.9em">Number of teams: {{ income.agencyNumber }}</div>
+                    <div style="font-size: 0.9em">
+                      {{ t('agency_number') }}: {{ income.agencyNumber }}
+                    </div>
                     <div style="display: flex; justify-content: space-between">
                       <div style="font-size: 0.9em">
-                        Team salary: ${{ income.teamSalaryAmount }}
+                        {{ t('team_salary') }}: ${{ income.teamSalaryAmount }}
                       </div>
                       <div style="font-size: 0.9em">
                         BD income (salary): ${{ income.bdIncomeSalary || 0 }} ({{
@@ -432,7 +441,7 @@
                     </div>
                     <div style="display: flex; justify-content: space-between">
                       <div style="font-size: 0.9em">
-                        Team top-up: ${{ income.teamRechargeAmount }}
+                        {{ t('team_recharge') }}: ${{ income.teamRechargeAmount }}
                       </div>
                       <div style="font-size: 0.9em">
                         BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{
@@ -444,10 +453,12 @@
 
                   <template v-else v-slot:content>
                     <div>{{ income.billTitle }}</div>
-                    <div style="font-size: 0.9em">Number Of Teams: {{ income.agencyNumber }}</div>
+                    <div style="font-size: 0.9em">
+                      {{ t('agency_number') }}: {{ income.agencyNumber }}
+                    </div>
                     <div style="display: flex; justify-content: space-between">
                       <div style="font-size: 0.9em">
-                        Team top-up: ${{ income.teamRechargeAmount }}
+                        {{ t('team_recharge') }}: ${{ income.teamRechargeAmount }}
                       </div>
                       <div style="font-size: 0.9em">
                         BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{
@@ -470,15 +481,15 @@
                   <template v-if="income.statusText == 'In Progress'" v-slot:content>
                     <div>{{ income.billTitle }}</div>
                     <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
-                      <div>Number Of BDs: {{ income.bdNumber }}</div>
-                      <div>Team Salary: ${{ income.teamSalaryAmount }}</div>
+                      <div>{{ t('bd_number') }}: {{ income.bdNumber }}</div>
+                      <div>{{ t('team_salary') }}: ${{ income.teamSalaryAmount }}</div>
                     </div>
                   </template>
 
                   <template v-else v-slot:content>
                     <div>{{ income.billTitle }}</div>
-                    <div>Number Of Teams: {{ income.bdNumber }}</div>
-                    <div>Team Top-Up: ${{ income.teamSalaryAmount }}</div>
+                    <div>{{ t('agent_number') }}: {{ income.bdNumber }}</div>
+                    <div>{{ t('team_recharge') }}: ${{ income.teamSalaryAmount }}</div>
                   </template>
                 </historySalary>
               </template>
@@ -505,9 +516,8 @@
           >
             <div style="font-weight: 600">{{ SalaryMore.period }}</div>
             <div style="font-size: 0.7em; font-weight: 600">
-              Team total recharge: ${{ SalaryMore.teamTotalRecharge }}, Team total salary: ${{
-                SalaryMore.teamTotalSalary
-              }}
+              {{ t('team_recharge') }}: ${{ SalaryMore.teamTotalRecharge }},
+              {{ t('total_team_salary') }}: ${{ SalaryMore.teamTotalSalary }}
             </div>
             <div
               v-for="member in SalaryMore.memberDetails"
@@ -568,11 +578,15 @@
                   justify-content: space-around;
                 "
               >
-                <div style="font-size: 0.8em; font-weight: 500">Salary: ${{ member.salary }}</div>
                 <div style="font-size: 0.8em; font-weight: 500">
-                  Recharge: ${{ member.recharge }}
+                  {{ t('salary') }}: ${{ member.salary }}
+                </div>
+                <div style="font-size: 0.8em; font-weight: 500">
+                  {{ t('recharge') }}: ${{ member.recharge }}
+                </div>
+                <div style="font-size: 0.8em; font-weight: 500">
+                  {{ t('host') }}:{{ member.hostCount }}
                 </div>
-                <div style="font-size: 0.8em; font-weight: 500">Host:{{ member.hostCount }}</div>
               </div>
             </div>
           </div>
@@ -594,7 +608,9 @@
           >
             <div style="font-weight: 600">{{ SalaryMore.period }}</div>
             <div style="font-size: 0.7em; font-weight: 600">
-              Team Salary: ${{ SalaryMore.teamSalary }}, BD number:{{ SalaryMore.bdNumber }}
+              {{ t('team_salary') }}: ${{ SalaryMore.teamSalary }}, {{ t('bd_number') }}:{{
+                SalaryMore.bdNumber
+              }}
             </div>
             <div
               v-for="member in SalaryMore.memberDetails"
@@ -655,9 +671,11 @@
                   justify-content: space-around;
                 "
               >
-                <div style="font-size: 0.8em; font-weight: 500">Salary: ${{ member.salary }}</div>
                 <div style="font-size: 0.8em; font-weight: 500">
-                  Agencies:{{ member.agencyCount }}
+                  {{ t('salary') }}: ${{ member.salary }}
+                </div>
+                <div style="font-size: 0.8em; font-weight: 500">
+                  {{ t('agency') }}:{{ member.agencyCount }}
                 </div>
               </div>
             </div>
@@ -670,8 +688,9 @@
 
 <script setup>
 import { computed, onMounted, ref } 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 { isInApp } from '@/utils/appBridge.js'
 import maskLayer from '@/components/MaskLayer.vue'
 import { clearSelectedPayee } from '@/utils/payeeStore.js'
@@ -679,9 +698,14 @@ import historySalary from '@/components/historySalary.vue'
 import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
 import { getBdMemberBillList, getBdHistory, getBdHistoryMore } from '@/api/bdCenter.js'
 import { getBdLeaderHistory, getBdLeaderHistoryMore } from '@/api/bdLeaderCenter'
+import { setDocumentDirection } from '@/locales/i18n'
 
+const { t, locale } = useI18n()
 const router = useRouter()
 
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 // 标签页数据
 const tabs = ref([
   { id: 1, name: 'BD' },
@@ -857,6 +881,9 @@ onMounted(() => {
 .bd-center {
   max-height: 100vh;
   overflow-y: auto;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  background-color: #ffffff;
+  background-image: url(../../assets/images/secondBg.png);
 }
 
 .bd-center::-webkit-scrollbar {
@@ -910,4 +937,14 @@ onMounted(() => {
     font-size: 24px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .avatar {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+[dir='rtl'] .user-info {
+  text-align: right;
+}
 </style>