feat(主播设置页): 使用新的头部组件，对接语言切换功能并调整布局

src/locales/ar.json

@@ -132,6 +132,11 @@
 
   "no_policy_data_available": "لا توجد بيانات سياسة متاحة",
 
+  "host_setting": "إعدادات المضيف",
+  "my_agency": "وكيلي",
+  "tips": "نصائح",
+  "leave_agent_tips": "يمكن للمضيف مغادرة الوكيل الحالي فقط في اليوم الأول والـ16 من كل شهر",
+
   "application_record_not_found": "Application record not found",
   "application_processed_cannot_cancel": "Application has been processed and cannot be canceled",
   "cancellation_failed_try_again": "Cancellation failed, please try again",

src/locales/en.json

@@ -132,6 +132,11 @@
 
   "no_policy_data_available": "No policy data available",
 
+  "host_setting": "Host Setting",
+  "my_agency": "My Agency",
+  "tips": "Tips",
+  "leave_agent_tips": "The host can only leave the current agent on the 1st and 16th of each month",
+
   "application_record_not_found": "Application record not found",
   "application_processed_cannot_cancel": "Application has been processed and cannot be canceled",
   "cancellation_failed_try_again": "Cancellation failed, please try again",

src/locales/zh.json

@@ -132,6 +132,11 @@
 
   "no_policy_data_available": "无可用政策数据",
 
+  "host_setting": "主播设置",
+  "my_agency": "我的代理",
+  "tips": "提示",
+  "leave_agent_tips": "主播只能在每月1日和16日离开当前代理",
+
   "application_record_not_found": "申请记录未找到",
   "application_processed_cannot_cancel": "申请已被处理，无法取消",
   "cancellation_failed_try_again": "取消失败，请重试",

src/views/HostSettingView.vue

@@ -1,13 +1,25 @@
 <template>
   <div class="host-setting gradient-background-circles">
-    <MobileHeader title="Host Setting" />
+    <!-- 使用 GeneralHeader 替换 MobileHeader -->
+    <GeneralHeader
+      :title="t('host_setting')"
+      :showBack="true"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
 
     <div style="padding: 16px; position: relative; z-index: 2">
       <!-- My Agency 部分 -->
       <div style="margin-bottom: 20px">
         <div style="display: flex; align-items: center; margin-bottom: 12px">
-          <div style="font-size: 1.4em; font-weight: 600">My Agency</div>
-          <img src="/src/assets/icon/agency.png" alt="" height="25px" style="display: block" />
+          <div style="font-size: 1.4em; font-weight: 600">{{ t('my_agency') }}</div>
+          <img
+            src="/src/assets/icon/agency.png"
+            alt=""
+            height="25px"
+            style="display: block; margin-left: 8px"
+          />
         </div>
 
         <div
@@ -29,7 +41,7 @@
               style="aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
               @error="defaultAvatarUrl"
             />
-            <div style="flex: 1">
+            <div style="flex: 1; margin-left: 12px">
               <div style="margin-bottom: 4px; font-weight: 600">
                 {{ userInfo.userNickname || '' }}
               </div>
@@ -40,7 +52,7 @@
           </div>
           <!-- 按钮 -->
           <div style="display: flex; align-items: center">
-            <div class="leave-btn" @click="maskLayerShow = true">Leave</div>
+            <div class="leave-btn" @click="maskLayerShow = true">{{ t('leave') }}</div>
           </div>
         </div>
       </div>
@@ -56,19 +68,19 @@
             <div
               style="margin: 0; font-size: 18px; font-weight: 600; color: #333; text-align: center"
             >
-              Tips
+              {{ t('tips') }}
             </div>
           </div>
 
           <div style="padding: 16px 20px; text-align: center">
             <div style="margin: 0 0 8px 0; font-size: 14px; color: #666; line-height: 1.5">
-              The host can only leave the current agent on the 1st and 16th of each month
+              {{ t('leave_agent_tips') }}
             </div>
           </div>
 
           <div style="display: flex; gap: 12px; padding: 0 20px 20px 20px">
-            <button class="cancel-btn" @click="maskLayerShow = false">Cancel</button>
-            <button class="confirm-btn" @click="confirmLeave">Confirm</button>
+            <button class="cancel-btn" @click="maskLayerShow = false">{{ t('cancel') }}</button>
+            <button class="confirm-btn" @click="confirmLeave">{{ t('confirm') }}</button>
           </div>
         </div>
       </div>
@@ -77,17 +89,23 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { 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 { showError } from '@/utils/toast.js'
 import { getMyAgency, leaveAgency } from '@/api/host'
 import maskLayer from '@/components/MaskLayer.vue'
 import { getTeamId } from '@/utils/userStore.js'
+import { setDocumentDirection } from '@/locales/i18n'
 
+const { t, locale } = useI18n()
 const router = useRouter()
 const maskLayerShow = ref(false)
 
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 // 用户信息
 const userInfo = ref({})
 
@@ -102,6 +120,7 @@ const confirmLeave = async () => {
   console.log('确定离开')
   const resLeave = await leaveAgency({ reason: 'QUIT', teamId: getTeamId() })
   if (resLeave.status) {
+    // 可以添加成功离开后的处理逻辑
   }
   maskLayerShow.value = false
 }
@@ -136,6 +155,7 @@ onMounted(() => {
   font-size: 0.9em;
   font-weight: 500;
   transition: background-color 0.2s;
+  cursor: pointer;
 }
 
 .leave-btn:active {
@@ -191,4 +211,15 @@ onMounted(() => {
     font-size: 24px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .leave-btn {
+  margin-right: 0;
+  margin-left: 8px;
+}
+
+[dir='rtl'] .agency-icon {
+  margin-left: 0;
+  margin-right: 8px;
+}
 </style>