feat(历史薪资页): 使用新的头部组件，对接语言切换功能并调整布局

src/components/GeneralHeader.vue

@@ -14,7 +14,7 @@
       "
     >
       <!-- 返回键 -->
-      <div style="width: 10%; display: flex; align-items: center">
+      <div style="width: 6%; display: flex; align-items: center">
         <button v-if="showBack" class="back-btn" @click="handleBack">
           <img
             class="flipImg"
@@ -67,24 +67,7 @@
               >
             </div> -->
         <transition name="slide-fade">
-          <div
+          <div v-show="visibleList" class="extraList">
-            style="
-              position: absolute;
-              right: 0;
-              top: 100%;
-              padding: 10px;
-              display: flex;
-              flex-direction: column;
-              width: max-content;
-              background-color: rgba(255, 255, 255);
-              border-radius: 10px;
-              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-              margin-top: 5px;
-              backdrop-filter: blur(8px);
-            "
-            v-show="visibleList"
-            class="extraList"
-          >
             <div
               style="padding: 8px; color: black !important; font-weight: 590"
               v-for="lang in langStore.langList"
@@ -241,6 +224,21 @@ onMounted(() => {
   transform: scale(0.9);
 }
 
+.extraList {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  background-color: rgba(255, 255, 255);
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  margin-top: 5px;
+  backdrop-filter: blur(8px);
+}
+
 .extraList > div:not(:last-child) {
   border-bottom: 0.1px solid black;
 }
@@ -249,6 +247,11 @@ onMounted(() => {
   transform: scaleX(-1);
 }
 
+[dir='rtl'] .extraList {
+  right: auto;
+  left: 0;
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;

src/components/HostCenter/workReportBox.vue

@@ -22,13 +22,8 @@
           <div class="contentText" v-if="income">{{ t('total_income') }}: {{ income }}</div>
         </div>
       </div>
-      <div
+      <div v-if="more" class="moreBt" @click="btMore">
-        v-if="more"
+        {{ t('more') }}
-        class="moreBt"
-        style="position: absolute; bottom: 8%; right: 4%; color: #bb92ff; font-weight: 500"
-        @click="btMore"
-      >
-        {{ t('more') }} >
       </div>
     </div>
   </div>
@@ -133,6 +128,12 @@ watch(
 
 .moreBt {
   font-size: 1em;
+
+  position: absolute;
+  bottom: 8%;
+  right: 4%;
+  color: #bb92ff;
+  font-weight: 500;
 }
 
 .flipImg {

src/locales/ar.json

@@ -34,7 +34,7 @@
   "target": "الهدف",
   "salary": "راتب",
   "time_days": "الوقت (الأيام)",
-  "more": "أكثر",
+  "more": "أكثر >",
   "exchange": "التبديل",
   "transfer": "تحويل الأموال",
   "host_salary": "راتب المضيف",

src/locales/en.json

@@ -34,7 +34,7 @@
   "target": "Target",
   "salary": "Salary",
   "time_days": "Time（Days）",
-  "more": "More",
+  "more": "More >",
   "exchange": "Exchange",
   "transfer": "Transfer",
   "host_salary": "Host Salary",

src/locales/zh.json

@@ -34,7 +34,7 @@
   "target": "目标",
   "salary": "工资",
   "time_days": "时间（天数）",
-  "more": "更多",
+  "more": "更多 >",
   "exchange": "兑换",
   "transfer": "转账",
   "host_salary": "主播工资",

src/views/HistorySalaryView.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="history-salary gradient-background-circles">
-    <MobileHeader title="History Salary" />
+    <!-- 修改头部使用 GeneralHeader 组件 -->
+    <GeneralHeader
+      :title="t('history_salary')"
+      :showBack="true"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+      @help="showHelpInfo"
+    />
 
     <!-- 内容 -->
     <div class="content">
@@ -18,7 +26,7 @@
         "
       >
         <div style="display: flex; flex-direction: column; gap: 10px">
-          <div>History Salary</div>
+          <div>{{ t('history_salary') }}</div>
           <div style="font-weight: 600">${{ totalSalary }}</div>
         </div>
         <img src="../assets/icon/help.png" alt="" class="info-btn" @click.stop="showHelpInfo" />
@@ -26,12 +34,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>
 
         <!-- 报告列表 -->
@@ -57,7 +67,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>
@@ -81,7 +91,7 @@
         >
           <div style="display: flex; justify-content: center; align-items: center">
             <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
-              Salary details
+              {{ t('salary_details') }}
             </div>
           </div>
 
@@ -110,7 +120,7 @@
             v-if="dailyTargets.length > 0"
             style="font-size: 16px; font-weight: 600; color: #333"
           >
-            Monthly Salary:
+            {{ t('monthly_salary') }}:
           </div>
 
           <!-- 等级卡片 -->
@@ -125,10 +135,10 @@
           >
             <div>
               <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px">
-                <div class="text-700">Target: {{ selectedReport.target }}</div>
+                <div class="text-700">{{ t('target') }}: {{ selectedReport.target }}</div>
-                <div class="text-700">Salary: ${{ selectedReport.salary }}</div>
+                <div class="text-700">{{ t('salary') }}: ${{ selectedReport.salary }}</div>
-                <div class="text-700">Time(Days): {{ selectedReport.timeDays }}</div>
+                <div class="text-700">{{ t('time_days') }}: {{ selectedReport.timeDays }}</div>
-                <div class="text-700">Total income: {{ selectedReport.income }}</div>
+                <div class="text-700">{{ t('total_income') }}: {{ selectedReport.income }}</div>
               </div>
             </div>
           </div>
@@ -137,7 +147,7 @@
             v-if="dailyTargets.length > 0"
             style="font-size: 16px; font-weight: 600; color: #333"
           >
-            Daily salary:
+            {{ t('daily_salary') }}:
           </div>
 
           <div style="overflow-y: auto" class="salaryList">
@@ -156,10 +166,10 @@
                   {{ formatDateNumber(daily.dateNumber) }}
                 </div>
                 <div style="display: flex; justify-content: space-between; align-items: center">
-                  <div class="text-700">Income: {{ daily.acceptGiftValue }}</div>
+                  <div class="text-700">{{ t('income') }}: {{ daily.acceptGiftValue }}</div>
 
                   <div style="font-size: 14px">
-                    <span class="text-700">Time:</span>
+                    <span class="text-700">{{ t('time') }}:</span>
                     <span
                       class="text-700"
                       style="font-weight: 600"
@@ -201,7 +211,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;
@@ -219,14 +231,12 @@
           </div>
 
           <div class="help-modal-body">
-            <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>
       </div>
@@ -236,11 +246,18 @@
 
 <script setup>
 import { onMounted, ref, watch } from 'vue'
-import MobileHeader from '../components/MobileHeader.vue'
+import { useI18n } from 'vue-i18n'
+import GeneralHeader from '@/components/GeneralHeader.vue'
 import { getTeamMemberWork, getTeamReleasePolicy } from '../api/teamBill.js'
 import { getTeamId, getUserId, getUserProfile } from '@/utils/userStore.js'
 import { getUserIdentity } from '@/api/wallet.js'
 import workReportBox from '@/components/HostCenter/workReportBox.vue'
+import { setDocumentDirection } from '@/locales/i18n'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
 
 const totalSalary = ref('0.00')
 const showHelpModal = ref(false)
@@ -417,10 +434,10 @@ const formatSalaryValue = (value) => {
 // 格式化状态文本（与 TeamBillView 保持一致）
 const getStatusText = (status) => {
   const statusMap = {
-    SETTLED: 'Completed',
+    SETTLED: t('completed'),
-    UNPAID: 'In Progress',
+    UNPAID: t('in_progress'),
-    HANG_UP: 'Out of Account',
+    HANG_UP: t('out_of_account'),
-    PAY_OUT: 'Completed',
+    PAY_OUT: t('completed'),
   }
   return statusMap[status] || status
 }
@@ -873,4 +890,9 @@ onMounted(async () => {
     font-size: 24px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .info-btn {
+  /* transform: scaleX(-1); */
+}
 </style>