feat(申请主播页): 调整切换语言后的布局

src/views/ApplyView.vue

@@ -1,19 +1,30 @@
 <template>
   <div class="apply-view">
-    <MobileHeader
+    <GeneralHeader
-      title="Apply to join the team"
+      :title="t('apply_join_team')"
       :showBack="false"
-      :showHelp="true"
+      :showLanguageList="true"
-      @help="showHelp"
+      color="black"
+      :style="{ borderBottom: '1px solid #E5E5E5' }"
     />
 
     <div class="content">
       <!-- 申请说明 -->
       <div class="reminder-section">
-        <h3>Reminder before application:</h3>
+        <div
+          class="reminder-title"
+          style="display: flex; align-items: center; justify-content: space-between"
+        >
+          <h3>{{ t('apply_reminder') }}</h3>
+          <img
+            src="../assets/icon/help.png"
+            alt=""
+            style="width: 16px; aspect-ratio: 1/1"
+            @click="showHelp"
+          />
+        </div>
         <p>
-          Enter the ID of your agency, and you will become the host after the host apply is
+          {{ t('apply_reminder_detail') }}
-          approved. After becoming an host, your income will be entrusted to your agency
         </p>
       </div>
 
@@ -21,11 +32,11 @@
       <div class="application-form">
         <!-- 输入框 -->
         <div class="input-group">
-          <label>Apply ID:</label>
+          <label>{{ t('apply_id') }}</label>
           <input
             v-model="agentId"
             type="text"
-            placeholder="Please enter the agency ID"
+            :placeholder="t('enter_agent_id')"
             class="agency-input"
           />
         </div>
@@ -37,28 +48,28 @@
           @click="submitApplication"
           :disabled="!agentId.trim() || isLoading"
         >
-          {{ isLoading ? 'Applying...' : 'Apply' }}
+          {{ t('apply') }}
         </button>
       </div>
     </div>
 
     <!-- 申请记录 -->
     <div v-if="applyRecords.length > 0" class="records-section">
-      <h3>Application Records</h3>
+      <h3>{{ t('application_records') }}</h3>
       <div class="record-list">
         <div v-for="record in applyRecords" :key="record.messageId" class="record-item">
           <div class="record-info">
-            <div class="team-info">
+            <!-- <div class="team-info">
-              <p class="team-label">Apply to join team:</p>
+              <p class="team-label">{{ t('apply_join_team') }}:</p>
               <p class="team-id">Team ID: {{ record.teamProfile?.id }}</p>
               <p class="team-country">
                 {{ record.teamProfile?.country?.countryName }} ({{
                   record.teamProfile?.country?.countryCode
                 }})
               </p>
-            </div>
+            </div> -->
             <div class="owner-info">
-              <p class="owner-label">Team owner:</p>
+              <p class="owner-label">{{ t('my_agent') }}:</p>
               <div class="owner-profile">
                 <img
                   v-if="record.ownUserProfile?.userAvatar"
@@ -73,8 +84,8 @@
             </div>
           </div>
           <div class="record-actions">
-            <span class="record-status status-pending"> Pending </span>
+            <span class="record-status status-pending"> {{ t('pending') }} </span>
-            <button class="cancel-btn" @click="handleCancelApply(record)">Cancel</button>
+            <button class="cancel-btn" @click="handleCancelApply(record)">{{ t('cancel') }}</button>
           </div>
         </div>
       </div>
@@ -83,18 +94,19 @@
     <!-- 帮助弹窗 -->
     <div v-if="showHelpModal" class="help-modal" @click="closeHelp">
       <div class="help-content" @click.stop>
-        <h3>Application Help</h3>
+        <h3>{{ t('application_help') }}</h3>
-        <p>Enter your agency's ID and click Apply to submit your application.</p>
+        <p>{{ t('application_help_detail') }}</p>
-        <button class="close-btn" @click="closeHelp">Got it</button>
+        <button class="close-btn" @click="closeHelp">{{ t('got_it') }}</button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, 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 {
   sendTeamApplyJoin,
   getWaitApplyRecord,
@@ -104,7 +116,9 @@ import {
 import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
 import { ApiError } from '@/utils/http.js'
 import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
+import { setDocumentDirection } from '@/locales/i18n'
 
+const { t, locale } = useI18n()
 const router = useRouter()
 
 const agentId = ref('')
@@ -114,6 +128,11 @@ const showHelpModal = ref(false)
 const applyRecords = ref([])
 const searchedTeamInfo = ref(null) // 存储搜索到的团队信息
 
+// 监听语言变化并设置文档方向
+watch(locale, (newLocale) => {
+  setDocumentDirection(newLocale)
+})
+
 // 获取申请记录
 const fetchApplyRecords = async () => {
   try {
@@ -133,12 +152,12 @@ const handleCancelApply = async (record) => {
   try {
     const response = await cancelApply(record.messageId)
     if (response.status) {
-      showSuccess('Successfully canceled')
+      showSuccess(t('application_cancelled'))
       // 刷新申请记录
       applyRecords.value = [] // 清空记录
       await fetchApplyRecords()
     } else {
-      showError(response.message || 'Cancellation failed, please try again')
+      showError(response.message || t('cancellation_failed'))
     }
   } catch (error) {
     console.error('撤销申请失败:', error)
@@ -147,13 +166,10 @@ const handleCancelApply = async (record) => {
       if (error.type === 'business') {
         switch (error.errorCode) {
           case 6404: // 假设的记录不存在错误码
-            showError('Application record not found', 'Cancellation failed')
+            showError(t('application_record_not_found'), t('cancellation_failed'))
             break
           case 6003: // 假设的已处理错误码
-            showError(
+            showError(t('application_processed_cannot_cancel'), t('cancellation_failed'))
-              'Application has been processed and cannot be canceled',
-              'Cancellation failed'
-            )
             break
           default:
             showError(
@@ -162,13 +178,10 @@ const handleCancelApply = async (record) => {
             )
         }
       } else {
-        showError(
+        showError(t('network_error'), t('cancellation_failed'))
-          'Network error, please check your connection and try again',
-          'Cancellation failed'
-        )
       }
     } else {
-      showError('Cancellation failed, please try again')
+      showError(t('cancellation_failed_try_again'))
     }
   }
 }
@@ -221,7 +234,7 @@ const submitApplication = async () => {
     const response = await sendTeamApplyJoin(applicationData)
 
     if (response.status) {
-      showSuccess('Application submitted successfully!')
+      showSuccess(t('application_submitted'))
       await fetchApplyRecords() // 刷新申请记录
       agentId.value = '' // 清空输入
       searchedTeamInfo.value = null // 清空搜索结果
@@ -337,7 +350,8 @@ usePageInitializationWithConfig('APPLY', {
   white-space: nowrap;
   display: flex;
   align-items: center;
-  padding: 8px;
+  padding-inline: 8px;
+  padding-block: 8px;
 }
 
 .input-group label {
@@ -363,6 +377,7 @@ usePageInitializationWithConfig('APPLY', {
 .agency-input::placeholder {
   color: rgba(0, 0, 0, 0.4);
   font-weight: 590;
+  font-size: 12px;
 }
 
 .error-message {
@@ -582,4 +597,119 @@ usePageInitializationWithConfig('APPLY', {
   font-size: 14px;
   color: #d97706;
 }
+
+/* RTL布局支持 - 更完整的实现 */
+[dir='rtl'] .application-form {
+  flex-direction: row-reverse;
+}
+
+[dir='rtl'] .record-item {
+  /* flex-direction: row-reverse; */
+}
+
+[dir='rtl'] .owner-profile {
+  /* flex-direction: row-reverse; */
+  text-align: right;
+}
+
+[dir='rtl'] .reminder-title {
+  /* flex-direction: row-reverse; */
+}
+
+/* 文本对齐 */
+[dir='rtl'] .record-info {
+  text-align: right;
+}
+
+[dir='rtl'] .team-info,
+[dir='rtl'] .owner-info {
+  text-align: right;
+}
+
+/* 按钮和交互元素 */
+[dir='rtl'] .cancel-btn {
+  margin-left: 0;
+  margin-right: 8px;
+}
+
+/* 状态标签 */
+[dir='rtl'] .record-status {
+  margin-left: 0;
+  margin-right: 8px;
+}
+
+/* 输入框标签 */
+[dir='rtl'] .input-group label {
+  margin-right: 0;
+  margin-left: 8px;
+}
+
+/* 帮助模态框 */
+[dir='rtl'] .help-content {
+  text-align: right;
+}
+
+/* 记录区域 */
+[dir='rtl'] .records-section {
+  text-align: right;
+}
+
+/* 应用按钮 */
+[dir='rtl'] .apply-btn {
+  margin-left: 0;
+  margin-right: 8px;
+}
+
+/* 团队信息 */
+[dir='rtl'] .team-label,
+[dir='rtl'] .owner-label {
+  text-align: right;
+}
+
+/* 团队ID和国家 */
+[dir='rtl'] .team-id,
+[dir='rtl'] .team-country {
+  text-align: right;
+}
+
+/* 所有者名称和账号 */
+[dir='rtl'] .owner-name,
+[dir='rtl'] .owner-account {
+  text-align: right;
+}
+
+/* 将物理属性替换为逻辑属性 */
+.input-group {
+  width: 100%;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  padding-inline: 8px;
+  padding-block: 8px;
+}
+
+.owner-profile {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.record-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 文本对齐使用逻辑属性 */
+.record-info {
+  text-align: start;
+}
+
+.team-info,
+.owner-info {
+  text-align: start;
+}
 </style>