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

src/components/HostCenter/workReportBox.vue

@@ -96,6 +96,8 @@ watch(
 
 // 更新展示类型
 const updateTypeShowText = () => {
+  console.log('更新展示类型')
+
   if (props.type == 'In Progress') {
     typeShowText.value = t('in_progress')
   } else if (props.type == 'Pending') {
@@ -111,23 +113,23 @@ watch(
   () => props.type,
   (newType) => {
     console.log('newType:', newType)
-
+    updateTypeShowText()
-    if (newType == 'In Progress') {
+    if (newType == 'In Progress' || newType == t('in_progress')) {
       backgroundImage.value = 'linear-gradient(112deg, #759CFF 5.66%, #3D73FF 42.49%)'
       fontSize.value = '0.9em'
       typeShowText.value = t('in_progress')
     }
-    if (newType == 'Pending') {
+    if (newType == 'Pending' || newType == t('pending')) {
       backgroundImage.value = 'linear-gradient(112deg, #FF7578 5.66%, #FF3D40 42.49%)'
       fontSize.value = '1em'
       typeShowText.value = t('pending')
     }
-    if (newType == 'Completed') {
+    if (newType == 'Completed' || newType == t('completed')) {
       backgroundImage.value = 'linear-gradient(112deg, #75FF98 5.66%, #3DFF54 42.49%)'
       fontSize.value = '1em'
       typeShowText.value = t('completed')
     }
-    if (newType == 'Out of account') {
+    if (newType == 'Out of account' || newType == t('out_of_account')) {
       backgroundImage.value = 'linear-gradient(112deg, #BDBDBD 5.66%, #AEAEAE 42.49%)'
       fontSize.value = '0.7em'
       typeShowText.value = t('out_of_account')

src/locales/ar.json

@@ -20,6 +20,7 @@
   "not_authorized": "غير مُصرح به للانضمام",
   "cancellation_failed": "فشلت الإلغاء",
   "network_error": "خطأ في الشبكة، يرجى التحقق من اتصالك والمحاولة مرة أخرى",
+  "host": "المضيف",
   "host_center": "مركز المضيف",
   "my_account": "حسابي",
   "my_salary": "راتبي",
@@ -180,5 +181,7 @@
   "information_details": "تفاصيل المعلومات",
   "no_transaction_records": "لا توجد سجلات معاملات",
   "retry": "إعادة المحاولة",
-  "failed_to_load_data": "فشل تحميل البيانات"
+  "failed_to_load_data": "فشل تحميل البيانات",
+
+  "no_data_available": "لا توجد بيانات متاحة"
 }

src/locales/en.json

@@ -20,6 +20,7 @@
   "not_authorized": "Not authorized to join",
   "cancellation_failed": "Cancellation failed",
   "network_error": "Network error,please check yourconnection and try again",
+  "host": "Host",
   "host_center": "Host Center",
   "my_account": "My account",
   "my_salary": "My salary：",
@@ -180,5 +181,7 @@
   "information_details": "Information details",
   "no_transaction_records": "No transaction records",
   "retry": "Retry",
-  "failed_to_load_data": "Failed to load data"
+  "failed_to_load_data": "Failed to load data",
+
+  "no_data_available": "No data available"
 }

src/locales/zh.json

@@ -20,6 +20,7 @@
   "not_authorized": "无权加入",
   "cancellation_failed": "取消失败",
   "network_error": "网络错误，请检查您的连接并重试。",
+  "host": "主播",
   "host_center": "主播中心",
   "my_account": "我的账户",
   "my_salary": "我的工资",
@@ -180,5 +181,7 @@
   "information_details": "信息详情",
   "no_transaction_records": "无交易记录",
   "retry": "重试",
-  "failed_to_load_data": "加载数据失败"
+  "failed_to_load_data": "加载数据失败",
+
+  "no_data_available": "暂无数据"
 }

src/views/AgencyCenterView.vue

@@ -413,10 +413,10 @@ const fetchMemberWorkData = async () => {
         // 格式化状态
         const formatStatus = (status) => {
           const statusMap = {
-            SETTLED: t('completed'),
+            SETTLED: 'Completed',
-            UNPAID: t('in_progress'),
+            UNPAID: 'In Progress',
-            HANG_UP: t('out_of_account'),
+            HANG_UP: 'Out of account',
-            PAY_OUT: t('completed'),
+            PAY_OUT: 'Completed',
           }
           return statusMap[status] || status
         }

src/views/TeamBillView.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="team-bill gradient-background-circles">
-    <MobileHeader title="Team Bill" />
+    <!-- 使用 GeneralHeader 替换 MobileHeader -->
+    <GeneralHeader
+      :title="t('team_bill')"
+      :isHomePage="false"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
 
     <div class="content">
       <!-- 成员资料信息 -->
@@ -17,7 +24,7 @@
         "
       >
         <div style="display: flex; flex-direction: column; gap: 10px">
-          <div>History Team Income:</div>
+          <div>{{ t('history_team_income') }}</div>
           <div style="font-weight: 600">$000</div>
         </div>
         <div
@@ -43,12 +50,14 @@
       <!-- 工作报告 -->
       <div style="margin-bottom: 20px">
         <!-- 工作报告标题 -->
-        <div style="margin: 10px 1%; font-weight: 600; color: rgba(0, 0, 0, 0.4)">Work report:</div>
+        <div style="margin: 10px 1%; font-weight: 600; color: rgba(0, 0, 0, 0.4)">
+          {{ t('work_report') }}
+        </div>
 
         <!-- 加载状态 -->
         <div v-if="loading" class="loading-container">
           <div class="loading-spinner"></div>
-          <p>Loading...</p>
+          <p>{{ t('loading') }}...</p>
         </div>
 
         <!-- 账单列表 -->
@@ -73,7 +82,7 @@
         <!-- 空数据状态 -->
         <div v-else class="empty-state">
           <div class="empty-icon">📋</div>
-          <p>No data available</p>
+          <p>{{ t('no_data_available') }}</p>
         </div>
       </div>
     </div>
@@ -104,7 +113,9 @@
             position: relative;
           "
         >
-          <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">Help</div>
+          <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
+            {{ t('help') }}
+          </div>
           <div
             style="
               position: absolute;
@@ -122,14 +133,12 @@
         </div>
 
         <div style="padding: 0 20px 20px; overflow-y: auto">
-          <p>Shown below is the work report of the members "More" can view more work detailed.</p>
+          <p>{{ t('work_report_description') }}</p>
-          <p>Status Description:</p>
+          <p>{{ t('status_description') }}</p>
-          <p>(1)Completed: The system has completed the settlement report.</p>
+          <p>{{ t('status_completed') }}</p>
-          <p>
+          <p>{{ t('status_pending') }}</p>
-            (2)Pending: There is currently a dispute, and the system cannot perform a settlement.
+          <p>{{ t('status_out_of_account') }}</p>
-          </p>
+          <p>{{ t('status_in_progress') }}</p>
-          <p>(3)Out of account: waiting for system verification.</p>
-          <p>(4)In progress: work now in progress.</p>
         </div>
       </div>
 
@@ -147,7 +156,8 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import MobileHeader from '../components/MobileHeader.vue'
+import { useI18n } from 'vue-i18n'
+import GeneralHeader from '../components/GeneralHeader.vue'
 import TeamBillMore from '../components/team/TeamBillMore.vue'
 import { getUserIdentity } from '@/api/wallet.js'
 import {
@@ -157,6 +167,12 @@ import {
   getTeamReleasePolicy,
 } from '../api/teamBill.js'
 import { getTeamId } from '@/utils/userStore.js'
+import { setDocumentDirection } from '@/locales/i18n'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
 
 const loading = ref(false)
 const showHelpModal = ref(false)
@@ -284,7 +300,7 @@ const fetchBillWorkMembers = async (billId) => {
 // 格式化状态文本
 const getStatusText = (status) => {
   const statusInfo = formatBillStatus(status)
-  return statusInfo.text
+  return t(statusInfo.textKey) // 使用翻译键而不是直接文本
 }
 
 // 获取状态样式类
@@ -747,4 +763,18 @@ onMounted(() => {
     font-size: 24px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .help-btn {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .arrow {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .close-btn {
+  right: auto;
+  left: 10px;
+}
 </style>