From c11d7f4d1b4283433f7b2a032a055b30f614324d Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 30 Oct 2025 10:35:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=8E=86=E5=8F=B2=E8=96=AA=E8=B5=84?=
 =?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/GeneralHeader.vue            | 41 ++++++-----
 src/components/HostCenter/workReportBox.vue | 15 ++--
 src/locales/ar.json                         |  2 +-
 src/locales/en.json                         |  2 +-
 src/locales/zh.json                         |  2 +-
 src/views/HistorySalaryView.vue             | 78 +++++++++++++--------
 6 files changed, 83 insertions(+), 57 deletions(-)

diff --git a/src/components/GeneralHeader.vue b/src/components/GeneralHeader.vue
index c8ff3fe..cb848e1 100644
--- a/src/components/GeneralHeader.vue
+++ b/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
-            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 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;
diff --git a/src/components/HostCenter/workReportBox.vue b/src/components/HostCenter/workReportBox.vue
index 490bb23..3254413 100644
--- a/src/components/HostCenter/workReportBox.vue
+++ b/src/components/HostCenter/workReportBox.vue
@@ -22,13 +22,8 @@
           <div class="contentText" v-if="income">{{ t('total_income') }}: {{ income }}</div>
         </div>
       </div>
-      <div
-        v-if="more"
-        class="moreBt"
-        style="position: absolute; bottom: 8%; right: 4%; color: #bb92ff; font-weight: 500"
-        @click="btMore"
-      >
-        {{ t('more') }} >
+      <div v-if="more" class="moreBt" @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 {
diff --git a/src/locales/ar.json b/src/locales/ar.json
index b5a8b8c..025f8b0 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -34,7 +34,7 @@
   "target": "الهدف",
   "salary": "راتب",
   "time_days": "الوقت (الأيام)",
-  "more": "أكثر",
+  "more": "أكثر >",
   "exchange": "التبديل",
   "transfer": "تحويل الأموال",
   "host_salary": "راتب المضيف",
diff --git a/src/locales/en.json b/src/locales/en.json
index 6343102..143d130 100644
--- a/src/locales/en.json
+++ b/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",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 02ffb70..4403d11 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -34,7 +34,7 @@
   "target": "目标",
   "salary": "工资",
   "time_days": "时间（天数）",
-  "more": "更多",
+  "more": "更多 >",
   "exchange": "兑换",
   "transfer": "转账",
   "host_salary": "主播工资",
diff --git a/src/views/HistorySalaryView.vue b/src/views/HistorySalaryView.vue
index 8ebede0..4d43558 100644
--- a/src/views/HistorySalaryView.vue
+++ b/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">Salary: ${{ selectedReport.salary }}</div>
-                <div class="text-700">Time(Days): {{ selectedReport.timeDays }}</div>
-                <div class="text-700">Total income: {{ selectedReport.income }}</div>
+                <div class="text-700">{{ t('target') }}: {{ selectedReport.target }}</div>
+                <div class="text-700">{{ t('salary') }}: ${{ selectedReport.salary }}</div>
+                <div class="text-700">{{ t('time_days') }}: {{ selectedReport.timeDays }}</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>Status Description:</p>
-            <p>(1)Completed: The system has completed the settlement report.</p>
-            <p>
-              (2)Pending: There is currently a dispute, and the system cannot perform a settlement.
-            </p>
-            <p>(3)Out of account: waiting for system verification.</p>
-            <p>(4)In progress: work now in progress.</p>
+            <p>{{ t('work_report_description') }}</p>
+            <p>{{ t('status_description') }}</p>
+            <p>{{ t('status_completed') }}</p>
+            <p>{{ t('status_pending') }}</p>
+            <p>{{ t('status_out_of_account') }}</p>
+            <p>{{ t('status_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',
-    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
 }
@@ -873,4 +890,9 @@ onMounted(async () => {
     font-size: 24px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .info-btn {
+  /* transform: scaleX(-1); */
+}
 </style>