From 39c2a4614f3d476ea6af9cb47978e88a67cbe215 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 30 Oct 2025 14:47:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=A3=E7=90=86=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E9=A1=B5):=20=E4=BD=BF=E7=94=A8=E6=96=B0=E7=9A=84=E5=A4=B4?=
 =?UTF-8?q?=E9=83=A8=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=AF=B9=E6=8E=A5=E8=AF=AD?=
 =?UTF-8?q?=E8=A8=80=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD=E5=B9=B6=E8=B0=83?=
 =?UTF-8?q?=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/HostCenter/workReportBox.vue |  42 ++++++-
 src/locales/ar.json                         |   4 +-
 src/locales/en.json                         |   6 +-
 src/locales/zh.json                         |   6 +-
 src/views/AgencyCenterView.vue              | 126 ++++++++++++++------
 5 files changed, 136 insertions(+), 48 deletions(-)

diff --git a/src/components/HostCenter/workReportBox.vue b/src/components/HostCenter/workReportBox.vue
index 3254413..7f0a350 100644
--- a/src/components/HostCenter/workReportBox.vue
+++ b/src/components/HostCenter/workReportBox.vue
@@ -5,7 +5,7 @@
       <div
         style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
       >
-        <div class="type" :style="{ fontSize }">{{ type }}</div>
+        <div class="type" :style="{ fontSize }">{{ typeShowText }}</div>
       </div>
     </div>
     <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 4%">
@@ -32,6 +32,7 @@
 <script setup>
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useLangStore } from '@/stores/lang'
 
 const { t } = useI18n()
 const whiteBox = new URL('../../assets/images/HostCenter/whitebox.png', import.meta.url).href
@@ -80,25 +81,56 @@ const btMore = () => {
 
 const backgroundImage = ref('')
 const fontSize = ref('')
+const typeShowText = ref('')
+const langStore = useLangStore()
+
+// 监听语言变化，确保UI更新
+watch(
+  () => langStore.selectedLang,
+  (newLang) => {
+    console.log('Language changed in header:', newLang)
+    updateTypeShowText()
+  },
+  { deep: true }
+)
+
+// 更新展示类型
+const updateTypeShowText = () => {
+  if (props.type == 'In Progress') {
+    typeShowText.value = t('in_progress')
+  } else if (props.type == 'Pending') {
+    typeShowText.value = t('pending')
+  } else if (props.type == 'Completed') {
+    typeShowText.value = t('completed')
+  } else if (props.type == 'Out of account') {
+    typeShowText.value = t('out_of_account')
+  }
+}
 
 watch(
   () => props.type,
   (newType) => {
-    if (newType == t('in_progress')) {
+    console.log('newType:', newType)
+
+    if (newType == 'In Progress') {
       backgroundImage.value = 'linear-gradient(112deg, #759CFF 5.66%, #3D73FF 42.49%)'
       fontSize.value = '0.9em'
+      typeShowText.value = t('in_progress')
     }
-    if (newType == t('pending')) {
+    if (newType == 'Pending') {
       backgroundImage.value = 'linear-gradient(112deg, #FF7578 5.66%, #FF3D40 42.49%)'
       fontSize.value = '1em'
+      typeShowText.value = t('pending')
     }
-    if (newType == t('completed')) {
+    if (newType == 'Completed') {
       backgroundImage.value = 'linear-gradient(112deg, #75FF98 5.66%, #3DFF54 42.49%)'
       fontSize.value = '1em'
+      typeShowText.value = t('completed')
     }
-    if (newType == t('out_of_account')) {
+    if (newType == 'Out of account') {
       backgroundImage.value = 'linear-gradient(112deg, #BDBDBD 5.66%, #AEAEAE 42.49%)'
       fontSize.value = '0.7em'
+      typeShowText.value = t('out_of_account')
     }
     return
   },
diff --git a/src/locales/ar.json b/src/locales/ar.json
index 9d87f3b..43be142 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -44,7 +44,6 @@
   "leave": "يغادر",
   "work_report": "سجل الراتب：",
   "in_progress": "قيد التنفيذ",
-  "pending": "قيد الانتظار",
   "completed": "مكتمل",
   "out_of_account": "لا يعلق بالحساب",
   "salary_details": "تفاصيل الراتب",
@@ -77,7 +76,8 @@
   "team_member": "عضو الفريق",
   "history_team_income": "سجل دخل الفريق：",
   "enter_host_id": "يرجى إدخال id المضيف",
-  "confirm_remove_member": "هل أنت متأكد من أنك تريد إزالةالمعرف: 1234567890 من الفريق؟",
+  "confirm_remove_member_start": "هل أنت متأكد من أنك تريد إزالةالمعرف:",
+  "confirm_remove_member_end": "من الفريق؟",
   "invite_members": "دعوة الأعضاء",
   "invite_download_app": "دعوة المستخدمين لتنزيل Likei",
   "invited_users_login": "يجب على المستخدمين المدعوين تسجيل الدخول إلى Likei",
diff --git a/src/locales/en.json b/src/locales/en.json
index e88b2f8..aa69664 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -9,7 +9,7 @@
   "application_help_detail": "Enter your agency's lD and click Apply to submit your application.After the application is successful, please wait patiently for the agent to pass the application",
   "got_it": "Got it",
   "application_records": "Application Records：",
-  "agency": "Agency：",
+  "agency": "Agency",
   "pending": "Pending",
   "cancel": "Cancel",
   "success": "Success",
@@ -44,7 +44,6 @@
   "leave": "Leave",
   "work_report": "Work report：",
   "in_progress": "In Progress",
-  "pending": "Pending",
   "completed": "Completed",
   "out_of_account": "Out of account",
   "salary_details": "Salary Details",
@@ -77,7 +76,8 @@
   "team_member": "Team Member",
   "history_team_income": "History Team Income：",
   "enter_host_id": "Please enter the host ID",
-  "confirm_remove_member": "Are you sure you want to remove ID：from the team?",
+  "confirm_remove_member_start": "Are you sure you want to remove ID:",
+  "confirm_remove_member_end": "from the team?",
   "invite_members": "Invite Members",
   "invite_download_app": "1、Invite users to download Likei APP.",
   "invited_users_login": "2、Invited users need to log in to the Likei APP.",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index c95fc74..2067fae 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -9,7 +9,7 @@
   "application_help_detail": "输入您所在机构的ID，然后点击\"申请\"提交您的申请。申请成功后，请耐心等待该代理通过申请。",
   "got_it": "知道了",
   "application_records": "申请记录：",
-  "agency": "主播代理：",
+  "agency": "主播代理",
   "pending": "待处理",
   "cancel": "取消",
   "success": "成功",
@@ -44,7 +44,6 @@
   "leave": "离开",
   "work_report": "工作记录",
   "in_progress": "进行中",
-  "pending": "待处理",
   "completed": "已完成",
   "out_of_account": "与账户无关",
   "salary_details": "工资明细",
@@ -77,7 +76,8 @@
   "team_member": "团队成员",
   "history_team_income": "历史团队收入",
   "enter_host_id": "请输入主播id",
-  "confirm_remove_member": "您确定要将ID：从团队中移除吗？",
+  "confirm_remove_member_start": "您确定要将ID：",
+  "confirm_remove_member_end": "从团队中移除吗？",
   "invite_members": "邀请成员",
   "invite_download_app": "邀请用户下载Likei APP",
   "invited_users_login": "受邀用户需登录Likei应用程序",
diff --git a/src/views/AgencyCenterView.vue b/src/views/AgencyCenterView.vue
index 4ab3fbc..5556cd9 100644
--- a/src/views/AgencyCenterView.vue
+++ b/src/views/AgencyCenterView.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="agency-center gradient-background-circles">
-    <MobileHeader title="Agency Center" />
+    <!-- 使用 GeneralHeader 替换 MobileHeader -->
+    <GeneralHeader
+      :title="t('agency_center')"
+      :isHomePage="true"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
 
     <div class="content">
       <!-- 身份 -->
@@ -15,7 +22,7 @@
             font-size: 1.3em;
           "
         >
-          My account
+          {{ t('my_account') }}
           <img src="../assets/icon/agency.png" alt="" height="20px" style="margin-left: 10px" />
         </div>
         <img @click="goToNotification" src="../assets/icon/bell.png" height="20px" alt="" />
@@ -49,7 +56,13 @@
             <div style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #333">
               {{ userInfo.userNickname || userInfo.name }}
             </div>
-            <div style="margin: 0; font-size: 14px; color: #666">ID: {{ userInfo.id }}</div>
+            <div style="margin: 0; font-size: 14px; color: #666">
+              <span style="display: flex; align-items: center">
+                <span>ID</span>
+                <span style="margin: 0 2px">:</span>
+                <span>{{ userInfo.id }}</span>
+              </span>
+            </div>
           </div>
           <button
             style="width: 32px; height: 32px; border: none; background: none; font-size: 16px"
@@ -61,7 +74,7 @@
         <!-- 我的薪资 -->
         <div>
           <div style="display: flex; justify-content: space-between; margin-bottom: 5px">
-            <div style="font-weight: 600">My salary:</div>
+            <div style="font-weight: 600">{{ t('my_salary') }}</div>
             <button
               style="
                 font-weight: 500;
@@ -71,7 +84,7 @@
               "
               @click="goToPersonalSalary"
             >
-              Personal Salary >
+              {{ t('personal_salary') }} >
             </button>
           </div>
         </div>
@@ -80,13 +93,13 @@
         <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
           <div>
             <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4); margin-bottom: 5px">
-              History Salary:
+              {{ t('history_salary') }}
             </div>
             <div style="font-weight: 600">${{ salaryInfo.hostSalary }}</div>
           </div>
           <div>
             <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4); margin-bottom: 5px">
-              Current Salary:
+              {{ t('current_salary') }}
             </div>
             <div style="font-weight: 600">${{ salaryInfo.currentSalary }}</div>
           </div>
@@ -102,7 +115,7 @@
             @click="taskTab = 'host'"
             ref="tabHost"
           >
-            Host
+            {{ t('host') }}
           </div>
           <div
             style="padding: 0 5px"
@@ -110,7 +123,7 @@
             @click="taskTab = 'agency'"
             ref="tabAgency"
           >
-            Agency
+            {{ t('agency') }}
           </div>
           <!-- 下划线元素 -->
           <div
@@ -153,7 +166,7 @@
             "
           >
             <div style="display: flex; justify-content: space-between">
-              <div style="font-weight: 600">Today's Task:</div>
+              <div style="font-weight: 600">{{ t('todays_task') }}</div>
               <button
                 style="
                   font-weight: 500;
@@ -163,7 +176,7 @@
                 "
                 @click="goToPlatformPolicy"
               >
-                Platform Policy >
+                {{ t('platform_policy') }} >
               </button>
             </div>
             <div style="display: flex">
@@ -177,7 +190,7 @@
                     gap: 5px;
                   "
                 >
-                  <div style="font-weight: 600">Anchor Type</div>
+                  <div style="font-weight: 600">{{ t('host_type') }}</div>
                   <div style="font-weight: 600">{{ taskInfo.anchorType }}</div>
                 </div>
               </div>
@@ -190,7 +203,7 @@
                   gap: 5px;
                 "
               >
-                <div style="font-weight: 600">Minutes</div>
+                <div style="font-weight: 600">{{ t('minutes') }}</div>
                 <div style="font-weight: 600">
                   {{ taskInfo.minutesProgress }}/{{ taskInfo.minutesTotal }}
                 </div>
@@ -205,7 +218,7 @@
                     gap: 5px;
                   "
                 >
-                  <div style="font-weight: 600">Gift Task</div>
+                  <div style="font-weight: 600">{{ t('gift_task') }}</div>
                   <div style="font-weight: 600">{{ taskInfo.giftTask }}</div>
                 </div>
               </div>
@@ -251,17 +264,19 @@
                 "
                 @click="goToTeamBill"
               >
-                Team Bill >
+                {{ t('team_bill') }} >
               </button>
             </div>
             <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px">
               <div class="contentText">
-                Host Salary: {{ loadingTeamBill ? '–' : teamBillInfo.hostSalary }}
+                {{ t('host_salary') }} {{ loadingTeamBill ? '–' : teamBillInfo.hostSalary }}
               </div>
               <div class="contentText">
-                Agency Salary: {{ loadingTeamBill ? '–' : teamBillInfo.agentSalary }}
+                {{ t('agent_salary') }} {{ loadingTeamBill ? '–' : teamBillInfo.agentSalary }}
+              </div>
+              <div class="contentText">
+                {{ t('total') }} {{ loadingTeamBill ? '–' : teamBillInfo.total }}
               </div>
-              <div class="contentText">Total: {{ loadingTeamBill ? '–' : teamBillInfo.total }}</div>
               <div style="display: flex; justify-content: flex-end">
                 <div
                   style="
@@ -285,8 +300,8 @@
             <div class="team-member-card" @click="goToTeamMember">
               <div class="card-content">
                 <div class="member-title">
-                  Team Member
-                  <span v-if="loadingMemberCount">(Loading...)</span>
+                  {{ t('team_member') }}
+                  <span v-if="loadingMemberCount">({{ t('loading') }}...)</span>
                   <span v-else class="member-title">({{ teamMemberCount }})</span>
                 </div>
                 <span class="arrow">></span>
@@ -298,8 +313,12 @@
 
       <!-- 操作按钮 -->
       <div class="action-buttons">
-        <button class="action-btn exchange-btn" @click="exchangeGoldCoins">Exchange</button>
-        <button class="action-btn transfer-btn" @click="transfer">Transfer</button>
+        <button class="action-btn exchange-btn" @click="exchangeGoldCoins">
+          {{ t('exchange') }}
+        </button>
+        <button class="action-btn transfer-btn" @click="transfer">
+          {{ t('transfer') }}
+        </button>
       </div>
     </div>
   </div>
@@ -307,16 +326,22 @@
 
 <script setup>
 import { ref, reactive, onMounted, computed, watch } 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 { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
 import { getTeamId, getUserId } from '@/utils/userStore.js'
 import { getTeamMemberCount, getTeamBill, getTeamMemberWork } from '@/api/teamBill.js'
 import { clearSelectedPayee } from '../utils/payeeStore.js'
 import workReportBox from '@/components/HostCenter/workReportBox.vue'
+import { setDocumentDirection } from '@/locales/i18n'
 
+const { t, locale } = useI18n()
 const router = useRouter()
 
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 // 任务标签
 const taskTab = ref('host')
 const tabHost = ref(null)
@@ -388,10 +413,10 @@ const fetchMemberWorkData = async () => {
         // 格式化状态
         const formatStatus = (status) => {
           const statusMap = {
-            SETTLED: 'Completed',
-            UNPAID: 'In Progress',
-            HANG_UP: 'Out of Account',
-            PAY_OUT: 'Completed',
+            SETTLED: t('completed'),
+            UNPAID: t('in_progress'),
+            HANG_UP: t('out_of_account'),
+            PAY_OUT: t('completed'),
           }
           return statusMap[status] || status
         }
@@ -423,19 +448,19 @@ const fetchMemberWorkData = async () => {
 watch(
   () => teamBillInfo?.status,
   (newStatus) => {
-    if (newStatus == 'In Progress') {
+    if (newStatus == t('in_progress')) {
       boxShadow.value = '0 0 1px 0 #6085FF'
       color.value = 'rgba(61, 115, 255, 1)'
     }
-    if (newStatus == 'Pending') {
+    if (newStatus == t('pending')) {
       boxShadow.value = '0 0 1px 0 #FF6062'
       color.value = 'rgba(255, 61, 64, 1)'
     }
-    if (newStatus == 'Completed') {
+    if (newStatus == t('completed')) {
       boxShadow.value = '0 0 1px 0 #60FF65'
       color.value = 'rgba(61, 255, 84, 1)'
     }
-    if (newStatus == 'Out Of Account') {
+    if (newStatus == t('out_of_account')) {
       boxShadow.value = '0 0 1px 0 #6A6161'
       color.value = 'rgba(174, 174, 174, 1)'
     }
@@ -529,10 +554,10 @@ const fetchTeamBillData = async () => {
         // 格式化状态
         const formatStatus = (status) => {
           const statusMap = {
-            SETTLED: 'Completed',
-            UNPAID: 'In Progress',
-            HANG_UP: 'Out of Account',
-            PAY_OUT: 'Completed',
+            SETTLED: t('completed'),
+            UNPAID: t('in_progress'),
+            HANG_UP: t('out_of_account'),
+            PAY_OUT: t('completed'),
           }
           return statusMap[status] || status
         }
@@ -1077,4 +1102,35 @@ onMounted(() => {
     width: 28px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .avatar {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+[dir='rtl'] .user-details {
+  text-align: right;
+}
+
+[dir='rtl'] .notification-btn {
+  margin-left: 0;
+  margin-right: 12px;
+}
+
+[dir='rtl'] .help-btn {
+  /* transform: scaleX(-1); */
+}
+
+[dir='rtl'] .arrow {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .card-link .arrow {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .detail-row {
+  direction: rtl;
+}
 </style>