feat: 完善多语言硬编码

src/locales/en.json

@@ -3,6 +3,7 @@
     "username": "User Name",
     "password": "Password",
     "login": "Login",
+    "logIn": "Log in",
     "forgotPassword": "Forgot Password?",
     "setPassword": "Set Password",
     "activateAccount": "Activate Account",
@@ -44,6 +45,7 @@
     "incorrectPassword": "Incorrect password. Please try again.",
     "incorrectEmail": "Incorrect email. Please try again.",
     "passwordSecurityAlert": "Please change your password for security.",
+    "oldPassword": "Old Password",
     "changePassword": "Change Password",
     "passwordLength12to20": "Password length between 12 - 20",
     "passwordMustContainUppercase": "Password must contain uppercase letters",
@@ -56,6 +58,9 @@
     "passwordResetSuccessfully": "Password Reset Successfully",
     "passwordResetSuccessfullyLine1": "Your password has been successfully reset.",
     "passwordResetSuccessfullyLine2": "You can now log in using your email and your new password.",
+    "passwordWillExpireMessage": "Your password will expire {expiredDays}, please reset your password",
+    "passwordSentToRegisteredEmail": "Your password sent to registered email.",
+    "changedSuccessfullyPleaseLogIn": "Changed successfully. Please log in.",
     "accountActivatedSuccessfully": "Account Activated Successfully",
     "accountActivatedSuccessfullyLine1": "Your account has been successfully activated.",
     "accountActivatedSuccessfullyLine2": "You can now log in using your email and the password you just created.",
@@ -85,12 +90,15 @@
     "update": "Update",
     "prompt": "Prompt",
     "logout": "Logout",
+    "light": "Light",
+    "dark": "Dark",
     "clearFilters": "Clear Filters",
     "downloadFile": "Download File",
     "selectedColumns": "Selected columns",
     "downloadWithAllColumns": "Download with all columns",
     "saveSuccess": "Saved successfully",
     "requestFailedRetry": "The request failed. Please try again later",
+    "changePassword": "Change Password",
     "errorPleaseTryAgainLater": "Error! Please try again later.",
     "copySuccess": "Copy success",
     "details": "Details",
@@ -154,7 +162,6 @@
     "pleaseSelectDateRange": "Please Select Date Range",
     "pleaseSelectService": "Please Select Service",
     "seeAll": "See All",
-    "changePassword": "Change Password",
     "action":"action",
     "partyType": "Party Type",
     "partyDetails": "Party Details",
@@ -306,13 +313,15 @@
     "title": "System Message",
     "eventNotifications": "Event Notifications",
     "allNotifications": "All Notifications",
-    "unread": "Unread",
-    "read": "Read",
-    "featureUpdate": "Feature Update",
+    "markAllRead": "Mark all read",
+    "viewAll": "View all",
     "milestoneUpdate": "Milestone Update",
     "containerStatusUpdate": "Container Status Update",
     "departureArrivalDelay": "Departure/Arrival Delay",
     "etdEtaChange": "ETD/ETA Change",
+    "featureUpdate": "Feature Update",
+    "unread": "Unread",
+    "read": "Read",
     "latestStatusUpdates": "Latest Status Updates ({count})",
     "departureDelay": "Departure Delay",
     "etdChange": "ETD Change",
@@ -325,6 +334,14 @@
     "smartNotificationContent": "Smart Notification is here! Four key event alerts with customizable rules and multi-channel delivery."
   },
   "layout": {
+    "themes": "Themes",
+    "customizeWorkspaceTip": "Customize your workspace by changing the appearance and theme color",
+    "dark": "Dark",
+    "userManual": "User Manual",
+    "demoVideo": "Demo Video",
+    "logout": "Logout",
+    "downloadKLNPortal": "Download KLN Portal",
+    "loginRequiredToUseFeature": "Please log in to use this feature.",
     "logoutConfirm": "Are you sure you want to logout?",
     "changePasswordTitle": "Change Password",
     "passwordUpdatedSuccessfully": "Password updated successfully",
@@ -339,6 +356,9 @@
     "viewAsCustomer": "View as Customer",
     "selectCustomer": "Select customer",
     "noData": "no data",
+    "oldPassword": "Old Password",
+    "newPassword": "New Password",
+    "confirmPassword": "Confirm Password",
     "passwordMismatch": "The password does not match. Please try again.",
     "passwordExpiredUnavailable": "This account's password has expired and is currently unavailable. Please select a different customer account to continue.",
     "accountNotActivated": "This account has not been activated yet. Please select a different customer account to continue.",
@@ -929,6 +949,7 @@
     "cancelled": "Cancelled",
     "bookingList": "Booking List",
     "selectDataOnOperationLogList": "Select data on your Operation Log list:",
+    "shipmentInformation": "Shipment Information",
     "downloadWithSelectedColumns": "Download with selected columns",
     "addNewDeliveryAddressTitle": "Add New Delivery Address",
     "addressLine1Placeholder": "Line 1",

src/views/AIApiLog/src/components/TableView/src/TableView.vue

@@ -371,14 +371,14 @@ defineExpose({
     style="padding: 0px 20px"
     class="table-box"
     v-loading.fullscreen.lock="exportLoading"
-    :element-loading-text="t('common.loading')"
+    element-loading-text="Loading..."
     element-loading-custom-class="element-loading"
     element-loading-background="rgb(43, 47, 54, 0.7)"
   >
     <div
       class="table-tools"
       v-loading.fullscreen.lock="logLoading"
-      :element-loading-text="t('common.loading')"
+      element-loading-text="Loading..."
       element-loading-custom-class="element-loading"
       element-loading-background="rgb(43, 47, 54, 0.7)"
     >

src/views/DestinationDelivery/src/components/DeliveryDate.vue

@@ -2,7 +2,9 @@
 import dayjs from 'dayjs'
 import { ref, watch } from 'vue'
 import { useUserStore } from '@/stores/modules/user'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const userStore = useUserStore()
 const valueFormatDate = 'MM/DD/YYYY'
 // type RangeValue = [Dayjs, Dayjs]
@@ -137,7 +139,7 @@ const handlePanelChange = (value: any, mode: any) => {
       :open="open"
       :disabled="Disabled"
       @change="changeRangeData"
-      :placeholder="['Start Time', 'End Time']"
+      :placeholder="[t('dateRange.startTime'), t('dateRange.endTime')]"
       :format="userStore.dateFormat"
       valueFormat="MM/DD/YYYY"
       @openChange="handleCalendarOpen(ETDDate)"
@@ -173,14 +175,20 @@ const handlePanelChange = (value: any, mode: any) => {
       <template #renderExtraFooter v-if="isShowExtra">
         <div class="calender_flex">
           <div class="footer_left">
-            <el-button class="el-button--noborder" @click="Earliest">Earliest Time</el-button>
-            <el-button class="el-button--noborder" @click="ChangeToday('Earliest')"
-              >Today</el-button
-            >
+            <el-button class="el-button--noborder" @click="Earliest">{{
+              t('dateRange.earliestTime')
+            }}</el-button>
+            <el-button class="el-button--noborder" @click="ChangeToday('Earliest')">{{
+              t('dateRange.today')
+            }}</el-button>
           </div>
           <div class="footer_left footer_right">
-            <el-button @click="Latest" class="el-button--noborder">Latest Time</el-button>
-            <el-button class="el-button--noborder" @click="ChangeToday('Latest')">Today</el-button>
+            <el-button @click="Latest" class="el-button--noborder">{{
+              t('dateRange.latestTime')
+            }}</el-button>
+            <el-button class="el-button--noborder" @click="ChangeToday('Latest')">{{
+              t('dateRange.today')
+            }}</el-button>
           </div>
         </div>
       </template>

src/views/DestinationDelivery/src/components/TableView/src/TableView.vue

@@ -438,7 +438,7 @@ defineExpose({
           v-if="
             isEmployeeRole &&
             row.status === 'Pending Approval' &&
-            row.kln_pic.includes(userStore.userInfo.employee_email.toUpperCase())
+            row.kln_pic.includes(userStore.userInfo.employee_email?.toUpperCase())
           "
           style="height: 24px; width: 24px"
         >
@@ -449,7 +449,7 @@ defineExpose({
           v-if="
             isEmployeeRole &&
             row.status === 'Pending Approval' &&
-            row.kln_pic.includes(userStore.userInfo.employee_email.toUpperCase())
+            row.kln_pic.includes(userStore.userInfo.employee_email?.toUpperCase())
           "
           @click="handleTips('reject', row)"
           class="action-btn el-button--blue"

src/views/DestinationDelivery/src/components/TableView/src/components/BookingDetailDialog.vue

@@ -112,7 +112,7 @@ defineExpose({
       <DetailStep :stepList="stepList" />
       <div class="booking-info">
         <div class="booking-no">
-          <span class="no">Booking No.{{ rowData?.booking_no }}</span>
+          <span class="no">{{ t('booking.bookingNo') }}{{ rowData?.booking_no }}</span>
           <v-tag class="tag" :type="rowData?.status">{{ rowData?.status }}</v-tag>
         </div>
         <div class="created-time">{{ formatTimezone(rowData?.created_time) }}</div>

src/views/DestinationDelivery/src/components/TableView/src/components/OperationLogProcess.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { formatTimezone } from '@/utils/tools'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
 const props = withDefaults(
   defineProps<{
     processList: Array<any>
@@ -28,7 +31,7 @@ const props = withDefaults(
 
 <template>
   <div class="operation-log">
-    <div class="label">Operation Log</div>
+    <div class="label">{{ t('operationLog.title') }}</div>
     <div class="process">
       <!-- <div class="left-line"></div> -->
       <div class="right-process-box">

src/views/DestinationDelivery/src/components/TableView/src/components/ShipmentInforTable.vue

@@ -3,6 +3,7 @@ import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import { formatTimezone, formatNumber } from '@/utils/tools'
 import { autoWidth } from '@/utils/table'
+import { t } from '@wangeditor/editor'
 
 const props = defineProps({
   data: Object
@@ -156,7 +157,7 @@ useRowClickStyle(tableRef)
 
 <template>
   <div class="shipment-infor-table">
-    <div class="label">Shipment Information</div>
+    <div class="label">{{ t('destinationDelivery.shipmentInformation') }}</div>
     <vxe-grid
       v-vloading="tableLoadingTable"
       ref="tableRef"
@@ -174,7 +175,7 @@ useRowClickStyle(tableRef)
         </div>
       </template>
       <template #empty v-if="!tableLoadingTable && tableData.data.length === 0">
-        <div class="empty">No data</div>
+        <div class="empty">{{ t('common.noData') }}</div>
       </template>
     </vxe-grid>
   </div>

src/views/Layout/src/components/Header/HeaderView.vue

@@ -126,7 +126,7 @@ const handleUserManual = () => {
           router.push('/login')
           userStore.logout()
           ElMessage.warning({
-            message: 'Please log in to use this feature.',
+            message: t('layout.loginRequiredToUseFeature'),
             grouping: true
           })
           return
@@ -214,7 +214,7 @@ const handleDemoVideo = () => {
   <div
     class="layout-toolbar"
     v-loading.fullscreen.lock="userManualLoading"
-    element-loading-text="Loading..."
+    element-loading-text="{{ t('common.loading') }}"
     element-loading-custom-class="element-loading"
     element-loading-background="rgb(43, 47, 54, 0.7)"
   >
@@ -266,13 +266,13 @@ const handleDemoVideo = () => {
         <div>
           <!-- Popover content remains the same -->
           <div class="header">
-            <span class="title">Themes</span>
+            <span class="title">{{ t('layout.themes') }}</span>
             <el-button @click="closePopover" class="close-icon el-button--text">
               <div class="font_family icon-icon_reject_b"></div>
             </el-button>
           </div>
           <div class="tips">
-            Customize your workspace by changing the appearance and theme color
+            {{ t('layout.customizeWorkspaceTip') }}
           </div>
           <div class="picture-module">
             <div class="item" :class="{ active: themeStore.theme === 'light' }">
@@ -294,14 +294,14 @@ const handleDemoVideo = () => {
               @click="toggleThemeMode('light')"
               :class="{ active: themeStore.theme === 'light' }"
             >
-              <span class="font_family icon-icon_light_b"></span>Light
+              <span class="font_family icon-icon_light_b"></span>{{ t('common.light') }}
             </div>
             <div
               class="btn-item"
               @click="toggleThemeMode('dark')"
               :class="{ active: themeStore.theme === 'dark' }"
             >
-              <span class="font_family icon-icon_dark_b"></span>Dark
+              <span class="font_family icon-icon_dark_b"></span>{{ t('common.dark') }}
             </div>
           </div>
         </div>
@@ -311,7 +311,7 @@ const handleDemoVideo = () => {
           <el-tooltip
             popper-class="theme-popper-class"
             effect="dark"
-            content="Themes"
+            :content="t('layout.themes')"
             placement="top"
             :offset="4"
             trigger="hover"
@@ -342,19 +342,19 @@ const handleDemoVideo = () => {
         <div class="options">
           <div class="item" @click="handleChangePassword">
             <span class="font_family icon-icon_password_b"></span>
-            Change Password
+            {{ t('layout.changePassword') }}
           </div>
           <div class="item" @click="handleUserManual">
             <span class="font_family icon-icon_manual_b"></span>
-            User Manual
+            {{ t('layout.userManual') }}
           </div>
           <div class="item" style="margin-left: 1px" @click="handleDemoVideo">
             <span class="font_family icon-icon_video_b"></span>
-            Demo Video
+            {{ t('layout.demoVideo') }}
           </div>
           <div class="item" style="margin-left: 2px" @click="handleLogout">
             <span class="font_family icon-icon_export_b"></span>
-            Logout
+            {{ t('layout.logout') }}
           </div>
         </div>
         <template #reference>
@@ -371,14 +371,14 @@ const handleDemoVideo = () => {
         @click="handleDownload"
       >
         <span class="font_family icon-icon_download_b" style="margin-right: 4px"></span>
-        Download KLN Portal
+        {{ t('layout.downloadKLNPortal') }}
       </el-button>
       <el-button
         v-if="!userStore.isLogin"
         class="el-button--main"
         style="margin-left: -10px"
         @click="handleLogin"
-        >Log in</el-button
+        >{{ t('login.logIn') }}</el-button
       >
     </div>
     <DownloadKLNPortal ref="downloadKLNPortalRef"></DownloadKLNPortal>

src/views/Layout/src/components/Header/components/ChangePasswordDialog.vue

@@ -133,7 +133,7 @@ defineExpose({
   >
     <div>
       <div class="form-item">
-        <span class="label">Old Password</span>
+        <span class="label">{{ t('layout.oldPassword') }}</span>
         <el-input
           v-model="pwdData.oldPassword"
           type="password"
@@ -149,7 +149,7 @@ defineExpose({
         <div class="error" v-if="loginError.oldPassword">{{ t('login.incorrectPassword') }}</div>
       </div>
       <div class="form-item">
-        <span class="label">New Password</span>
+        <span class="label">{{ t('layout.newPassword') }}</span>
         <el-input
           v-model="pwdData.newPassword"
           type="password"
@@ -188,7 +188,7 @@ defineExpose({
         </div>
       </div>
       <div class="form-item">
-        <span class="label">Confirm Password</span>
+        <span class="label">{{ t('layout.confirmPassword') }}</span>
         <el-input
           v-model="pwdData.confirmPassword"
           type="password"
@@ -208,12 +208,12 @@ defineExpose({
       </div>
     </div>
     <template #footer>
-      <el-button class="el-button--default" style="height: 40px" @click="dialogVisible = false"
-        >{{ t('common.cancel') }}</el-button
-      >
-      <el-button @click="handleUpdate" class="el-button--dark" style="height: 40px"
-        >{{ t('common.update') }}</el-button
-      >
+      <el-button class="el-button--default" style="height: 40px" @click="dialogVisible = false">{{
+        t('common.cancel')
+      }}</el-button>
+      <el-button @click="handleUpdate" class="el-button--dark" style="height: 40px">{{
+        t('common.update')
+      }}</el-button>
     </template>
   </el-dialog>
 </template>

src/views/Layout/src/components/Header/components/KAMMapping.vue

@@ -73,29 +73,20 @@ const processCustomerSwitch = async (targetUname: string, isMappingMode: boolean
 
       window.location.reload()
     } else if (res.code === 4001) {
-      ElMessageBox.alert(
-        t('layout.passwordExpiredUnavailable'),
-        {
-          confirmButtonText: t('common.ok'),
-          confirmButtonClass: 'el-button--dark'
-        }
-      )
+      ElMessageBox.alert(t('layout.passwordExpiredUnavailable'), {
+        confirmButtonText: t('common.ok'),
+        confirmButtonClass: 'el-button--dark'
+      })
     } else if (res.code === 4002) {
-      ElMessageBox.alert(
-        t('layout.accountNotActivated'),
-        {
-          confirmButtonText: t('common.ok'),
-          confirmButtonClass: 'el-button--dark'
-        }
-      )
+      ElMessageBox.alert(t('layout.accountNotActivated'), {
+        confirmButtonText: t('common.ok'),
+        confirmButtonClass: 'el-button--dark'
+      })
     } else if (res.code === 4003) {
-      ElMessageBox.alert(
-        t('layout.accountDisabled'),
-        {
-          confirmButtonText: t('common.ok'),
-          confirmButtonClass: 'el-button--dark'
-        }
-      )
+      ElMessageBox.alert(t('layout.accountDisabled'), {
+        confirmButtonText: t('common.ok'),
+        confirmButtonClass: 'el-button--dark'
+      })
     }
   } catch (err) {
     ElMessage.error(t('layout.operationFailedRetry')) // 给用户一个友好的提示
@@ -149,9 +140,9 @@ watch(
     :class="{ focus: visible, 'hide-mapping': !isShowMapping }"
     :style="{ 'justify-content': !isShowMapping ? 'center' : 'space-between' }"
   >
-    <span style="margin-right: 5px; color: var(--color-neutral-3)" v-if="!isShowMapping"
-      >{{ t('layout.viewAsCustomer') }}</span
-    >
+    <span style="margin-right: 5px; color: var(--color-neutral-3)" v-if="!isShowMapping">{{
+      t('layout.viewAsCustomer')
+    }}</span>
 
     <el-popover
       @show="visible = true"
@@ -192,7 +183,9 @@ watch(
           >
             {{ cust.kam_customers_name }}
           </div>
-          <div class="empty-content" v-if="showCustomerList.length === 0">{{ t('layout.noData') }}</div>
+          <div class="empty-content" v-if="showCustomerList.length === 0">
+            {{ t('layout.noData') }}
+          </div>
         </div>
       </div>
     </el-popover>

src/views/Layout/src/components/Header/components/NotificationDrawer.vue

@@ -2,7 +2,9 @@
 import NotificationMessageCard from '@/components/NotificationMessageCard/src/NotificationMessageCard.vue'
 import { useRouter } from 'vue-router'
 import { useNotificationMessage } from '@/stores/modules/notificationMessage'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const router = useRouter()
 const notificationMsgStore = useNotificationMessage()
 
@@ -10,12 +12,12 @@ const loading = ref(false)
 
 const notificationType = ref('all')
 const notificationTypeList = ref({
-  all: 'All Notifications',
-  Milestone_Update: 'Milestone Update',
-  Container_Status_Update: 'Container Status Update',
-  'Departure/Arrival_Delay': 'Departure/Arrival Delay',
-  'ETD/ETA_Change': 'ETD/ETA Change',
-  Feature_Update: 'Feature Update'
+  all: t('systemMessage.allNotifications'),
+  Milestone_Update: t('systemMessage.milestoneUpdate'),
+  Container_Status_Update: t('systemMessage.containerStatusUpdate'),
+  'Departure/Arrival_Delay': t('systemMessage.departureArrivalDelay'),
+  'ETD/ETA_Change': t('systemMessage.etdEtaChange'),
+  Feature_Update: t('systemMessage.featureUpdate')
 })
 
 const notificationList = ref<any[]>([])
@@ -124,7 +126,7 @@ const closeDrawer = () => {
         <div class="notification-header">
           <el-button @click="handleMarkAllRead" class="mark-all-read el-button--text" size="small">
             <span class="font_family icon-icon_confirm_b show-icon"></span>
-            <span>Mark all read</span>
+            <span>{{ t('systemMessage.markAllRead') }}</span>
           </el-button>
           <div class="view-all">
             <el-button
@@ -133,7 +135,7 @@ const closeDrawer = () => {
               @click="handleViewAll"
             >
               <span class="font_family icon-icon_jumplink_b1 show-icon"></span>
-              <span>View all</span>
+              <span>{{ t('systemMessage.viewAll') }}</span>
             </el-button>
             <el-button
               class="el-button--text"

src/views/Login/src/components/ActivatedDialog.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const router = useRouter()
 const dialogModel = ref(false)
 const state = ref<'reset' | 'activate'>('activate')
@@ -12,14 +14,14 @@ const openDialog = (stateValue: 'reset' | 'activate') => {
 
 const tipsData = ref({
   reset: {
-    title: 'Password Reset Successfully',
-    firstLine: 'Your password has been successfully reset.',
-    secondLine: 'You can now log in using your email and your new password.'
+    title: t('login.passwordResetSuccessfully'),
+    firstLine: t('login.passwordResetSuccessfullyLine1'),
+    secondLine: t('login.passwordResetSuccessfullyLine2')
   },
   activate: {
-    title: 'Account Activated Successfully',
-    firstLine: 'Your account has been successfully activated.',
-    secondLine: 'You can now log in using your email and the password you just created.'
+    title: t('login.accountActivatedSuccessfully'),
+    firstLine: t('login.accountActivatedSuccessfullyLine1'),
+    secondLine: t('login.accountActivatedSuccessfullyLine2')
   }
 })
 const handleGotoLogin = () => {
@@ -45,8 +47,11 @@ defineExpose({
       </div>
     </div>
     <template #footer>
-      <el-button style="width: 120px; height: 40px" class="el-button--dark" @click="handleGotoLogin"
-        >Go to Login</el-button
+      <el-button
+        style="width: 120px; height: 40px"
+        class="el-button--dark"
+        @click="handleGotoLogin"
+        >{{ t('login.goToLogin') }}</el-button
       >
     </template>
   </el-dialog>

src/views/Login/src/components/ChangePasswordCard.vue

@@ -33,6 +33,12 @@ if (!loginForm.value.username) {
   ElMessage.warning(t('login.pleaseLoginFirst'))
 }
 const newPwdErrTips = ref('')
+const passwordRuleTips = computed(() => [
+  t('login.passwordMustContainUppercase'),
+  t('login.passwordMustContainLowercase'),
+  t('login.passwordMustContainNumber'),
+  t('login.passwordLength12to20')
+])
 const loginError: any = ref({
   oldPassword: false,
   newPassword: false,
@@ -46,22 +52,22 @@ const handleChangePwd = () => {
   }
   if (loginForm.value.newPassword.length < 12 || loginForm.value.newPassword.length > 20) {
     loginError.value.newPassword = true
-    newPwdErrTips.value = 'Password length between 12 - 20'
+    newPwdErrTips.value = t('login.passwordLength12to20')
     return
   }
   if (!/[A-Z]/.test(loginForm.value.newPassword)) {
     loginError.value.newPassword = true
-    newPwdErrTips.value = 'Password must contain uppercase letters'
+    newPwdErrTips.value = t('login.passwordMustContainUppercase')
     return
   }
   if (!/[a-z]/.test(loginForm.value.newPassword)) {
     loginError.value.newPassword = true
-    newPwdErrTips.value = 'Password must contain lowercase letters'
+    newPwdErrTips.value = t('login.passwordMustContainLowercase')
     return
   }
   if (!/[0-9]/.test(loginForm.value.newPassword)) {
     loginError.value.newPassword = true
-    newPwdErrTips.value = 'Password must contain numbers'
+    newPwdErrTips.value = t('login.passwordMustContainNumber')
     return
   }
   $api
@@ -132,7 +138,7 @@ const checkPassword = () => {
   <div class="login" :class="{ 'dark-bg': themeStore.theme === 'dark' }">
     <el-card class="login-card">
       <div class="title" :class="{ 'is-dark': themeStore.theme === 'dark' }">
-        <span class="welcome">Change Password</span>
+        <span class="welcome">{{ t('login.changePassword') }}</span>
         <span class="tips">{{ tips }}</span>
       </div>
       <div class="login-form">
@@ -148,7 +154,7 @@ const checkPassword = () => {
           </template>
         </el-input>
         <div class="label">
-          <span>Old Password</span>
+          <span>{{ t('login.oldPassword') }}</span>
           <span class="forgot-password" @click="handleForgot">{{ t('login.forgotPassword') }}</span>
         </div>
         <el-input
@@ -166,7 +172,7 @@ const checkPassword = () => {
         </el-input>
         <div class="error" v-if="loginError.oldPassword">{{ t('login.incorrectPassword') }}</div>
         <div class="label">
-          <span>New Password</span>
+          <span>{{ t('login.newPassword') }}</span>
         </div>
         <el-input
           ref="passWordRef"
@@ -186,15 +192,15 @@ const checkPassword = () => {
         <div class="limit-tips">
           <div class="tip-item">
             <span class="font_family icon-icon_confirm_b" :class="{ active: hasUppercase }"></span>
-            <span>Password must contain uppercase letters</span>
+            <span>{{ t('login.passwordMustContainUppercase') }}</span>
           </div>
           <div class="tip-item">
             <span class="font_family icon-icon_confirm_b" :class="{ active: hasLowercase }"></span>
-            <span>Password must contain lowercase letters</span>
+            <span>{{ t('login.passwordMustContainLowercase') }}</span>
           </div>
           <div class="tip-item">
             <span class="font_family icon-icon_confirm_b" :class="{ active: hasNumber }"></span>
-            <span>Password must contain numbers</span>
+            <span>{{ t('login.passwordMustContainNumber') }}</span>
           </div>
           <div class="tip-item">
             <span
@@ -202,11 +208,11 @@ const checkPassword = () => {
               class="font_family icon-icon_confirm_b"
               :class="{ active: isValidLength }"
             ></span>
-            <span>Password length between12 - 20 </span>
+            <span>{{ t('login.passwordLength12to20') }}</span>
           </div>
         </div>
         <div class="label">
-          <span>Confirm New Password</span>
+          <span>{{ t('login.confirmNewPassword') }}</span>
         </div>
 
         <el-input
@@ -224,11 +230,11 @@ const checkPassword = () => {
           </template>
         </el-input>
         <div class="error" v-if="loginError.confirmPassword">
-          The password does not match. Please try again.
+          {{ t('login.passwordMismatch') }}
         </div>
-        <el-button @click="handleChangePwd" class="el-button--dark login-btn"
-          >Change Password</el-button
-        >
+        <el-button @click="handleChangePwd" class="el-button--dark login-btn">{{
+          t('login.changePassword')
+        }}</el-button>
       </div>
       <template #footer>
         <div class="license">

src/views/Login/src/loginView.vue

@@ -211,11 +211,11 @@ const handleResult = (res: any) => {
     if (data.msg === 'today' || data.msg === 'last') {
       const expiredDays = data.msg === 'today' ? 'today' : `in ${data.data} days`
       ElMessageBox.confirm(
-        `Your password will expire ${expiredDays}, please reset your password`,
-        'Prompt',
+        t('login.passwordWillExpireMessage', { expiredDays }),
+        t('common.prompt'),
         {
           confirmButtonText: t('common.ok'),
-          cancelButtonText: 'Change Password',
+          cancelButtonText: t('login.changePassword'),
           type: 'warning',
           confirmButtonClass: 'el-button--dark',
           cancelButtonClass: 'el-button--main',
@@ -286,7 +286,7 @@ const handleLoginAfterVerify = () => {
 const backLogin = (emailTips: boolean) => {
   status.value = 'login'
   isEmailTips.value = emailTips
-  emailTipsContent.value = emailTips ? 'Your password sent to registered email.' : ''
+  emailTipsContent.value = emailTips ? t('login.passwordSentToRegisteredEmail') : ''
   // 如果是成功忘记密码，清空保存的账号密码
   // 如果是直接返回登录，获取保存的账号密码
   setTimeout(() => {
@@ -332,10 +332,10 @@ const emailTipsContent = ref()
 const initEmailTips = () => {
   if (route.query.isChange === 'true') {
     isEmailTips.value = true
-    emailTipsContent.value = 'Changed successfully. Please log in.'
+    emailTipsContent.value = t('login.changedSuccessfullyPleaseLogIn')
   } else {
     isEmailTips.value = false
-    emailTipsContent.value = 'Your password sent to registered email.'
+    emailTipsContent.value = t('login.passwordSentToRegisteredEmail')
   }
 }
 initEmailTips()
@@ -481,9 +481,9 @@ const firstLoginTipsRef = ref()
         </el-input>
         <div class="error" v-if="loginError.email">{{ t('login.incorrectEmail') }}</div>
 
-        <el-button @click="handleVerification" class="el-button--dark login-btn"
-          >Send Reset Link</el-button
-        >
+        <el-button @click="handleVerification" class="el-button--dark login-btn">{{
+          t('login.sendResetLink')
+        }}</el-button>
         <div @click="backLogin(false)" class="back-text">
           <span class="font_family icon-icon_back_b"></span>
           <span class="text"> {{ t('login.backToLogin') }}</span>

src/views/OperationLog/src/components/BookingTable/src/BookingTable.vue

@@ -354,7 +354,7 @@ defineExpose({
     style="padding: 0px 20px"
     class="booking-table"
     v-loading.fullscreen.lock="exportLoading"
-    :element-loading-text="t('common.loading')"
+    element-loading-text="Loading..."
     element-loading-custom-class="element-loading"
     element-loading-background="rgb(43, 47, 54, 0.7)"
   >
@@ -392,7 +392,9 @@ defineExpose({
     </vxe-grid>
     <vxe-grid :height="10" ref="allTableRef" class="all-table" v-bind="allTable"> </vxe-grid>
     <div class="bottom-pagination">
-      <div class="left-total-records">{{ t('common.total') }} {{ formatNumber(pageInfo.total) }}</div>
+      <div class="left-total-records">
+        {{ t('common.total') }} {{ formatNumber(pageInfo.total) }}
+      </div>
       <div class="right-pagination">
         <el-pagination
           v-model:current-page="pageInfo.pageNo"

src/views/Tracking/src/components/DownloadAttachment/src/DownloadAttachment.vue

@@ -257,7 +257,7 @@ const handleDownloadAllSelectedFiles = (label?: string) => {
   <div
     class="tracking-download-attachment"
     v-loading.fullscreen.lock="bodyLoading"
-    :element-loading-text="t('common.loading')"
+    element-loading-text="Loading..."
     element-loading-custom-class="element-loading"
     element-loading-background="rgb(43, 47, 54, 0.7)"
     v-vloading="pageLoading"