feat: 完善多语言

src/locales/en.json

@@ -3,6 +3,7 @@
     "username": "User Name",
     "password": "Password",
     "logIn": "Log in",
+    "seeAll": "See All",
     "forgotPassword": "Forgot Password?",
     "resetPassword": "Reset Password",
     "newPassword": "New Password",
@@ -61,11 +62,6 @@
   },
   "common": {
     "search": "Search",
-    "customerSearchPlaceholder": "Search by Customer code, Customer name",
-    "customerType": "Customer Type",
-    "controllingCustomer": "Controlling Customer",
-    "billTo": "Bill to",
-    "notifyParty": "Notify Party",
     "cancel": "Cancel",
     "save": "Save",
     "reset": "Reset",
@@ -137,7 +133,6 @@
     "emptyResultLine1": "We didn't find any search results,",
     "emptyResultLine2": "please try to adjust your search keywords.",
     "pageGuide": "Page Guide",
-
     "departed": "Departed",
     "cargoReceived": "Cargo Received",
     "arrived": "Arrived",
@@ -160,6 +155,58 @@
     "referenceTipForTracking": "We support the following references number to find tracking:",
     "subscribe": "Subscribe",
     "vgm": "VGM",
+    "saveSuccess": "Save success",
+    "customizeColumnsTip": "Drag item over to this selection or click \"add\" icon to show the column on your shipment list",
+    "moreFiltersGuide": "Click \"More Filters\" to see more search options.",
+    "hblGuide": "Click on the HBL No. or double-click anywhere on a single shipment data to enter the detailed page.",
+    "downloadGuideCount": "View the number of shipments selected for download",
+    "downloadGuideTpl": "Two download list templates are available",
+    "columnsGuideRight": "Drag to right to add columns",
+    "columnsGuideLeft": "Drag to left to unselect columns",
+    "columnsGuideOrder": "Drag up and down to reorder or select/unselect",
+    "pageGuideDesc": "After closing, you can still click the \"Page Guide\" button to view the page guide of the current page.",
+
+    "mawbMblNo": "MAWB/MBL No.",
+    "hawbHblNo": "HAWB/HBL No.",
+    "bookingNo": "Booking No.",
+    "poNo": "PO No.",
+    "incoterm": "Incoterm",
+    "serviceType": "Service Type",
+    "loadTerms": "Load Terms",
+    "shipmentType": "Shipment Type",
+    "co2Emission": "CO2 Emission",
+
+    "searchGuideTitle": "Frequently Used Search Criteria Display Area",
+    "searchGuideStatus": "Key Booking Status",
+    "searchGuideRef": "Reference Numbers",
+    "searchGuideMode": "Transport Mode",
+    "searchGuideRange": "Date Type & Range",
+    "filterGuideArea": "Selected query criteria display area",
+    "filterGuideClear": "You can quickly clear selected conditions at this position",
+
+    "shipmentStatus": "Shipment Status",
+    "containerStatus": "Container Status",
+    "shipper": "Shipper",
+    "consignee": "Consignee",
+    "originAgent": "Origin Agent",
+    "destinationAgent": "Destination Agent",
+    "quantityUnit": "Quantity Unit",
+    "gWeight": "G Weight",
+    "chWeight": "CH Weight",
+    "volume": "Volume",
+    "marks": "Marks",
+    "description": "Description",
+    "remark": "Remark",
+    "marksAndDescription":"Marks and Description",
+    "locationCode": "Location Code",
+    "locationCity": "Location City",
+    "pleaseEnterEmailContent": "Please enter the email content",
+    "emailSentSuccessfully": "Email sent successfully",
+    "failedToSendEmail": "Failed to send email",
+
+   
+
+    "shareLinkTip": "Copy the link to share this shipment with anyone.",
     "publicSearchPlaceholder": "Enter Booking/HBL/MBL/PO/Container No.",
     "publicReferenceTipTitle": "We support the following references number to find shipment:",
     "publicReferenceTipList": "· Tracking No./Booking No./HAWB No./MAWB No./PO No./Quote No./Invoice No./Container No.",
@@ -180,7 +227,7 @@
     "allowedFileTypes": "The file types allowed for upload are: PDF, XLSX and DOCX.",
     "communicationToKln": "Communication to KLN:",
     "cc": "CC",
-    "separatedByTip": "Separated by ;",
+    "separatedByTip": "Separated by",
     "fileSizeLimit": "File size must not exceed 5MB!",
     "selectFileTypeAndUpload": "Please select file type and upload file",
     "uploadSuccessfully": "Upload successfully",
@@ -203,6 +250,8 @@
     "defaultSetting": "Default Setting",
     "etd": "ETD",
     "eta": "ETA",
+    "atd": "ATD",
+    "ata": "ATA",
     "noAccess": "No access",
     "drawerTitleBoth": "AMS/ISF",
     "drawerTitleAms": "AMS",
@@ -229,8 +278,10 @@
     "destination": "Destination",
     "etdAtd": "ETD / ATD",
     "etaAta": "ETA / ATA",
+    "addReference": "Add Reference",
     "vesselAirline": "Vessel / Airline",
     "voyageFlight": "Voyage / Flight",
+    "referenceType": "Reference Type",
     "refNo": "Ref No.",
     "packing": "Packing",
     "tdShare": "Share",
@@ -591,6 +642,10 @@
     "unsavedChangesTitle": "Unsaved Changes",
     "notificationEvents": "Notification Events",
     "selectEventPlaceholder": "Select event",
+    "milestoneUpdate": "Milestone Update",
+    "containerStatusUpdate": "Container Status Update",
+    "departureArrivalDelay": "Departure/Arrival Delay",
+    "etdEtaChange": "ETD/ETA Change",
     "setting": "Setting",
     "pleaseSelectNotificationEventsFirst": "Please select Notification Events first",
     "shipmentRange": "Shipment Range",
@@ -656,6 +711,20 @@
     "previous": "Previous",
     "submit": "Submit",
     "submitAndCommitment": "We are committed to working hard to provide better services.",
+
+
+    "shipper":"Shipper",
+    "consignee":"Consignee",
+    "controllingCustomer": "Controlling Customer",
+    "billTo": "Bill to",
+    "notifyParty": "Notify Party",
+    "customerSearchPlaceholder": "Search by Customer code, Customer name",
+    "customerType": "Customer Type",
+    "viewManagement": "View Management",
+
+
+
+
     "apologizeAgain": "Apologize once again for your experience.",
     "appreciateFeedback": "We greatly appreciate your valuable time and feedback.",
     "thankYouPositive": "Once again, thank you for your positive evaluation.",
@@ -679,11 +748,13 @@
     "pleaseEnterEmailContent": "Please enter the email content",
     "refNoDialogTitle": "Ref No.",
     "searchPlaceholder": "Enter Booking/HBL/PO/Container/Carrier Booking No. ",
+    "customizeColumnsTip": "Drag item over to this selection or click \"add\" icon to show the column on your booking list",
     "selectReferenceTypePlaceholder": "Select Reference Type",
     "selected": "Selected",
     "transportMode": "Transport Mode",
     "shipmentStatus": "Shipment Status",
-    "bookingListEmptyTipLine1": "We support the following references number to find booking:",
+    "bookingListEmptyTipLine1": "We support the following references number to find bookings: Booking No./HAWB No./MAWB No./PO No./Carrier Booking No./Contract No./File No./Quote No.",
+    "bookingListEmptyTipLine2": "",
     "etd": "ETD",
     "textSearch": "text search",
     "bookingNo": "Booking No.",
@@ -750,6 +821,7 @@
     "cancelled": "Cancelled",
     "bookingList": "Booking List",
     "selectDataOnOperationLogList": "Select data on your Operation Log list:",
+    "operationLogTitle": "Operation Log",
     "shipmentInformation": "Shipment Information",
     "downloadWithSelectedColumns": "Download with selected columns",
     "addNewDeliveryAddressTitle": "Add New Delivery Address",
@@ -814,6 +886,7 @@
     "emptyBookingTitle": "You haven't created any destination delivery bookings yet.",
     "emptyBookingLine1": "Book truck or rail delivery for your shipments to save time and",
     "emptyBookingLine2": "ensure smooth last-mile delivery.",
+    "pendingTaskTip": "This is some description information about the pending task, if there is too much content.",
     "modifyBooking": "Modify Booking",
     "selected": "Selected",
     "submit": "Submit",

src/views/Booking/src/BookingView.vue

@@ -221,7 +221,7 @@ const handleSearch = () => {
                   :offset="6"
                   popper-class="ShowAlerIcon"
                   effect="dark"
-                  :content="t('booking.bookingListEmptyTipLine1') + ' ' + t('booking.bookingListEmptyTipLine2')"
+                  :content="t('booking.bookingListEmptyTipLine1')"
                   placement="bottom"
                 >
                   <span class="iconfont_icon iconfont_icon_tip">
@@ -248,9 +248,9 @@ const handleSearch = () => {
         @clearMoreFiltersTags="clearMoreFiltersTags"
         :isShowMoreFiltersGuidePhoto="guideStore.booking.isShowMoreFiltersGuidePhoto"
       ></MoreFilters>
-      <el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput"
-        >{{ t('booking.search') }}</el-button
-      >
+      <el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput">{{
+        t('booking.search')
+      }}</el-button>
     </div>
     <!-- 筛选项 -->
     <div class="filtersTag" v-if="filtersStore.getTagsList.length" id="booking-filter-tag-guide">

src/views/Booking/src/components/BookingDetail/src/components/BasicInformation.vue

@@ -58,25 +58,25 @@ const allData: any = ref({
   },
   businessPartners: [
     {
-      title: 'Shipper',
+      title: t('booking.shipper'),
       company: '',
       address: '',
       phone: ''
     },
     {
-      title: 'Consignee',
+      title: t('booking.consignee'),
       company: '',
       address: '',
       phone: ''
     },
     {
-      title: 'Origin Agent',
+      title: t('booking.originAgent'),
       company: '',
       address: '',
       phone: ''
     },
     {
-      title: 'Destination Agent',
+      title: t('booking.destinationAgent'),
       company: '',
       address: '',
       phone: ''
@@ -84,29 +84,29 @@ const allData: any = ref({
   ],
   packing: [
     {
-      label: 'Quantity / Unit',
+      label: t('booking.quantityUnit'),
       content: ''
     },
     {
-      label: 'G. Weight',
+      label: t('booking.gWeight'),
       content: ''
     },
     {
-      label: 'Ch. Weight',
+      label: t('booking.chWeight'),
       content: ''
     },
     {
-      label: 'Volume',
+      label: t('booking.volume'),
       content: ''
     }
   ],
   marksAndDescription: [
     {
-      label: 'Marks',
+      label: t('booking.marks'),
       content: ''
     },
     {
-      label: 'Description',
+      label: t('booking.description'),
       content: ''
     }
   ]
@@ -125,7 +125,7 @@ const convertData = (data: any) => {
     basicInformation: {
       top: [
         {
-          label: 'Booking No.',
+          label: t('booking.bookingNo'),
           content: data.basicInfo['bookingNo.'] || '--'
         },
         {

src/views/Booking/src/components/BookingDetail/src/components/EmailView.vue

@@ -183,7 +183,7 @@ const sendEmail = () => {
               cursor: default;
             "
           >
-            <span style="font-weight: 600">CC：</span>
+            <span style="font-weight: 600">{{ t('tracking.cc') }}：</span>
             <el-tooltip
               class="box-item"
               effect="dark"

src/views/Dashboard/src/components/CustomerFilter.vue

@@ -96,23 +96,23 @@ onUnmounted(() => {
 
 const typeOptions = ref([
   {
-    label: t('common.shipper'),
+    label: t('dashboard.shipper'),
     value: 'shipper_id'
   },
   {
-    label: t('common.consignee'),
+    label: t('dashboard.consignee'),
     value: 'consignee_id'
   },
   {
-    label: t('common.controllingCustomer'),
+    label: t('dashboard.controllingCustomer'),
     value: 'customer_code'
   },
   {
-    label: t('common.billTo'),
+    label: t('dashboard.billTo'),
     value: 'billto_id'
   },
   {
-    label: t('common.notifyParty'),
+    label: t('dashboard.notifyParty'),
     value: 'notify_party_id'
   }
 ])
@@ -129,7 +129,7 @@ const handleSearch = () => {
       multiple
       filterable
       reserve-keyword
-      :placeholder="t('common.customerSearchPlaceholder')"
+      :placeholder="t('dashboard.customerSearchPlaceholder')"
       :loading="loading"
       style="width: 400px"
       collapse-tags
@@ -158,7 +158,7 @@ const handleSearch = () => {
       </el-option>
     </el-select>
     <el-select
-      :placeholder="t('common.customerType')"
+      :placeholder="t('dashboard.customerType')"
       multiple
       :max-collapse-tags="1"
       collapse-tags

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

@@ -127,31 +127,31 @@ const emit = defineEmits(['getNumberCards'])
 const rtnNumberCards = (data) => {
   const cards = [
     {
-      label: 'Total Bookings',
+      label: t('destinationDelivery.totalBookings'),
       value: data.All || 0,
       color: '#2b2f36',
       key: 'ALL'
     },
     {
-      label: 'Pending Approval',
+      label: t('destinationDelivery.pendingApproval'),
       value: data.pending_approval_rc || 0,
       color: '#edb82f',
       icon: 'icon_time_b'
     },
     {
-      label: 'Approved',
+      label: t('destinationDelivery.approved'),
       value: data.approved_rc || 0,
       color: '#00a870',
       icon: 'icon_confirm_b'
     },
     {
-      label: 'Rejected',
+      label: t('destinationDelivery.rejected'),
       value: data.rejected_rc || 0,
       color: '#c9353f',
       icon: 'icon_reject_b'
     },
     {
-      label: 'Cancelled',
+      label: t('destinationDelivery.cancelled'),
       value: data.cancelled_rc || 0,
       color: '#243041',
       icon: 'icon_cancelled_b'

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

@@ -74,8 +74,7 @@ const handleStepData = (status, data) => {
       date: data.update_time || '--',
       icon: 'icon_reject_b',
       status: 'rejected',
-      description:
-        'This is some description information about the pending task, if there is too much content.'
+      description: t('destinationDelivery.pendingTaskTip')
     })
   } else if (status === 'Cancelled') {
     stepList.value.push({

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

@@ -31,7 +31,7 @@ const props = withDefaults(
 
 <template>
   <div class="operation-log">
-    <div class="label">{{ t('operationLog.title') }}</div>
+    <div class="label">{{ t('destinationDelivery.operationLogTitle') }}</div>
     <div class="process">
       <!-- <div class="left-line"></div> -->
       <div class="right-process-box">

src/views/Report/src/components/ReportSchedule/src/components/FieldsTable.vue

@@ -23,11 +23,11 @@ watch(
 const manageReportFieldsRef = ref()
 const columnSortoptions = [
   {
-    label: t('report.eta'),
+    label: t('common.eta'),
     value: 'eta'
   },
   {
-    label: t('report.etd'),
+    label: t('common.etd'),
     value: 'etd'
   }
 ]

src/views/SystemSettings/src/components/CreateNewrule/src/CreateNewrule.vue

@@ -9,19 +9,19 @@ const { t } = useI18n()
 const notificationvalue = ref()
 const notificationoptions = ref([
   {
-    label: 'Milestone Update',
+    label: t('systemSettings.milestoneUpdate'),
     value: 'Milestone'
   },
   {
-    label: 'Container Status Update',
+    label: t('systemSettings.containerStatusUpdate'),
     value: 'Container'
   },
   {
-    label: 'Departure/Arrival Delay',
+    label: t('systemSettings.departureArrivalDelay'),
     value: 'Departure'
   },
   {
-    label: 'ETD/ETA Change',
+    label: t('systemSettings.etdEtaChange'),
     value: 'ETDChange'
   }
 ])

src/views/Tracking/src/components/PublicTracking/src/components/BasicInformation.vue

@@ -40,13 +40,13 @@ const allData: any = ref({
   },
   businessPartners: [
     {
-      title: 'Origin Agent',
+      titleKey: 'ptOriginAgent',
       company: '',
       address: '',
       phone: ''
     },
     {
-      title: 'Destination Agent',
+      titleKey: 'ptDestinationAgent',
       company: '',
       address: '',
       phone: ''

src/views/Tracking/src/components/PublicTracking/src/components/MilestonesTable.vue

@@ -3,6 +3,9 @@ import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
 // import { autoWidth } from '@/utils/table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import { formatTimezone } from '@/utils/tools'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const props = defineProps({
   height: {
@@ -80,7 +83,7 @@ useRowClickStyle(tableRef)
   <div class="containers">
     <vxe-grid ref="tableRef" :style="{ border: 'none' }" v-bind="tableData">
       <template #empty>
-        <div class="empty">No data</div>
+        <div class="empty">{{ t('common.noData') }}</div>
       </template>
     </vxe-grid>
   </div>

src/views/Tracking/src/components/TrackingDetail/src/components/BasicInformation.vue

@@ -14,79 +14,79 @@ const allData: any = ref({
   basicInformation: {
     top: [
       {
-        label: 'MAWB/MBL No.',
+        label: t('tracking.mawbMblNo'),
         content: ''
       },
       {
-        label: 'HAWB/HBL No.',
+        label: t('tracking.hawbHblNo'),
         content: ''
       },
       {
-        label: 'Booking No.',
+        label: t('tracking.bookingNo'),
         content: ''
       },
       {
-        label: 'PO No.',
+        label: t('tracking.poNo'),
         content: ''
       },
       {
-        label: 'Ref No.',
+        label: t('tracking.refNo'),
         content: []
       }
     ],
     bottom: [
       {
-        label: 'Vessel / Airline',
+        label: t('tracking.vesselAirline'),
         content: ''
       },
       {
-        label: 'Voyage / Flight',
+        label: t('tracking.voyageFlight'),
         content: ''
       },
       {
-        label: 'Incoterm',
+        label: t('tracking.incoterm'),
         content: ''
       },
       {
-        label: 'Service Type',
+        label: t('tracking.serviceType'),
         content: ''
       },
 
       {
-        label: 'Load Terms',
+        label: t('tracking.loadTerms'),
         content: ''
       },
       {
-        label: 'Shipment Type',
+        label: t('tracking.shipmentType'),
         content: ''
       },
       {
-        label: 'CO2 Emission',
+        label: t('tracking.co2Emission'),
         content: ''
       }
     ]
   },
   businessPartners: [
     {
-      title: 'Shipper',
+      title: t('tracking.shipper'),
       company: '',
       address: '',
       phone: ''
     },
     {
-      title: 'Consignee',
+      title: t('tracking.consignee'),
       company: '',
       address: '',
       phone: ''
     },
     {
-      title: 'Origin Agent',
+      title: t('tracking.originAgent'),
       company: '',
       address: '',
       phone: ''
     },
     {
-      title: 'Destination Agent',
+      title: t('tracking.destinationAgent'),
       company: '',
       address: '',
       phone: ''
@@ -94,33 +94,33 @@ const allData: any = ref({
   ],
   packing: [
     {
-      label: 'Quantity / Unit',
+      label: t('tracking.quantityUnit'),
       content: ''
     },
     {
-      label: 'G. Weight',
+      label: t('tracking.gWeight'),
       content: ''
     },
     {
-      label: 'Ch. Weight',
+      label: t('tracking.chWeight'),
       content: ''
     },
     {
-      label: 'Volume',
+      label: t('tracking.volume'),
       content: ''
     }
   ],
   marksAndDescription: [
     {
-      label: 'Marks',
+      label: t('tracking.marks'),
       content: ''
     },
     {
-      label: 'Description',
+      label: t('tracking.description'),
       content: ''
     },
     {
-      label: 'Remark',
+      label: t('tracking.remark'),
       content: ''
     }
   ]
@@ -139,78 +139,78 @@ const convertData = (data: any) => {
     basicInformation: {
       top: [
         {
-          label: 'MAWB/MBL No.',
+          label: t('tracking.mawbMblNo'),
           content: data.basicInfo['MAWB/MBL No.'] || '--'
         },
         {
-          label: 'HAWB/HBL No.',
+          label: t('tracking.hawbHblNo'),
           content: data.basicInfo['HAWB/HBOL'] || '--'
         },
         {
-          label: 'Booking No.',
+          label: t('tracking.bookingNo'),
           content: data.basicInfo.Carrier_Booking_No || '--'
         },
         {
-          label: 'PO No.',
+          label: t('tracking.poNo'),
           content: data.basicInfo.PO_NO || '--'
         },
         {
-          label: 'Ref No.',
+          label: t('tracking.refNo'),
           content: data.ref_no || '--'
         }
       ],
       bottom: [
         {
-          label: 'Vessel / Airline',
+          label: t('tracking.vesselAirline'),
           content: data.basicInfo['Vessel/Airline'] || '--'
         },
         {
-          label: 'Voyage / Flight',
+          label: t('tracking.voyageFlight'),
           content: data.basicInfo['Voyage/Filght'] || '--'
         },
         {
-          label: 'Incoterm',
+          label: t('tracking.incoterm'),
           content: data.basicInfo.Incoterm || '--'
         },
         {
-          label: 'Service Type',
+          label: t('tracking.serviceType'),
           content: data.basicInfo.Service_Type || '--'
         },
         {
-          label: 'Load Terms',
+          label: t('tracking.loadTerms'),
           content: data.basicInfo['Load Terms'] || '--'
         },
         {
-          label: 'Shipment Type',
+          label: t('tracking.shipmentType'),
           content: data.basicInfo['Shipment Type'] || '--'
         },
         {
-          label: 'CO2 Emission',
+          label: t('tracking.co2Emission'),
           content: data.basicInfo['CO2 Emission'] || '--'
         }
       ]
     },
     businessPartners: [
       {
-        title: 'Shipper',
+        title: t('tracking.shipper'),
         company: data.businessPartners.shipper.company || '--',
         address: data.businessPartners.shipper.address || '--',
         phone: data.businessPartners.shipper.phone || '--'
       },
       {
-        title: 'Consignee',
+        title: t('tracking.consignee'),
         company: data.businessPartners.consignee.company || '--',
         address: data.businessPartners.consignee.address || '--',
         phone: data.businessPartners.consignee.phone || '--'
       },
       {
-        title: 'Origin Agent',
+        title: t('tracking.originAgent'),
         company: data.businessPartners.origin.company || '--',
         address: data.businessPartners.origin.address || '--',
         phone: data.businessPartners.origin.phone || '--'
       },
       {
-        title: 'Destination Agent',
+        title: t('tracking.destinationAgent'),
         company: data.businessPartners.destination.company || '--',
         address: data.businessPartners.destination.address || '--',
         phone: data.businessPartners.destination.phone || '--'
@@ -218,33 +218,33 @@ const convertData = (data: any) => {
     ],
     packing: [
       {
-        label: 'Quantity / Unit',
+        label: t('tracking.quantityUnit'),
         content: data.packing['Quantity/Unit'] || '--'
       },
       {
-        label: 'G. Weight',
+        label: t('tracking.gWeight'),
         content: substringFromStart(data.packing['G. Weight'], -4) + ' KGS'
       },
       {
-        label: 'Ch. Weight',
+        label: t('tracking.chWeight'),
         content: substringFromStart(data.packing['Ch. Weight'], -4) + ' KGS'
       },
       {
-        label: 'Volume',
+        label: t('tracking.volume'),
         content: substringFromStart(data.packing['Volume'], -4) + ' CBM'
       }
     ],
     marksAndDescription: [
       {
-        label: 'Marks',
+        label: t('tracking.marks'),
         content: data.marksAndDescription.marks || '--'
       },
       {
-        label: 'Description',
+        label: t('tracking.description'),
         content: data.marksAndDescription.description || '--'
       },
       {
-        label: 'Remark',
+        label: t('tracking.remark'),
         content: data.marksAndDescription.remark || '--'
       }
     ]
@@ -404,7 +404,7 @@ defineExpose({
         </div>
       </div>
       <div class="packing">
-        <div class="header">Packing</div>
+        <div class="header">{{ t('tracking.packing') }}</div>
         <div class="content">
           <div class="data-item" v-for="item in allData.packing" :key="item.label">
             <div class="title">{{ item.label }}</div>
@@ -414,7 +414,7 @@ defineExpose({
       </div>
       <div class="marks-and-description">
         <div class="header">
-          <span>Marks and Description</span>
+          <span>{{ t('tracking.marksAndDescription') }}</span>
         </div>
         <div class="data-info">
           <div class="data-item" v-for="item in allData.marksAndDescription" :key="item.label">
@@ -436,13 +436,14 @@ defineExpose({
                 ref="descriptionTextRef"
                 style="display: block"
                 :class="{
-                  'ellipsis-3-lines': item.label === 'Description' && isDescriptionCollapse
+                  'ellipsis-3-lines':
+                    item.label === t('tracking.description') && isDescriptionCollapse
                 }"
               >
                 {{ item.content }}
               </span>
               <el-popover
-                v-if="item.label === 'Description' && isDescriptionCollapse"
+                v-if="item.label === t('tracking.description') && isDescriptionCollapse"
                 popper-class="marks-popover description-see-all"
                 placement="top-end"
                 :width="700"
@@ -454,7 +455,7 @@ defineExpose({
                 </div>
                 <template #reference>
                   <el-button class="description-see-all el-button--text">
-                    <span>See All</span>
+                    <span>{{ t('common.seeAll') }}</span>
                   </el-button>
                 </template>
               </el-popover>

src/views/Tracking/src/components/TrackingDetail/src/components/EmailDrawer.vue

@@ -189,7 +189,7 @@ const sendEmail = () => {
             <el-tooltip
               class="box-item"
               effect="dark"
-              :content="t('tracking.separatedByTip')"
+              :content="t('tracking.separatedByTip') + ' ;'"
               placement="top-start"
               :offset="-8"
             >

src/views/Tracking/src/components/TrackingDetail/src/components/RoutesView.vue

@@ -9,34 +9,7 @@ const { t } = useI18n()
 const props = defineProps({
   data: Object
 })
-const routes: any = ref([
-  {
-    serialNumber: 'Leg 1',
-    mode: 'Sea',
-    origin: 'ShenzhenShw',
-    destination: 'ShenzhenS',
-    etd: 'Jun-08-2024 12:00 AM',
-    atd: 'Jun-10-2024 12:00 AM',
-    eta: 'Jun-14-2024 12:00 AM',
-    ata: 'Jun-16-2024 12:00 AM',
-    vessel: 'MSC ALLEGRA',
-    voyageNo: 'FJ428W',
-    isCollapse: false
-  },
-  {
-    serialNumber: 'Leg 2',
-    mode: 'Sea',
-    origin: 'ValeShenzhenShweShenzhenShweShenzhenShweShenzhenShwenciaenz',
-    destination: 'ShenzhenShweShenzhenShweShenzhenShweShenzhenShwe',
-    etd: 'Jun-15-2024 12:00 AM',
-    atd: 'Jun-17-2024 12:00 AM',
-    eta: 'Jun-21-2024 12:00 AM',
-    ata: 'Jun-23-2024 12:00 AM',
-    vessel: 'MSC ALLEGRA',
-    voyageNo: 'FJ428W',
-    isCollapse: false
-  }
-])
+const routes: any = ref([])
 
 watch(
   () => props.data,
@@ -111,11 +84,11 @@ const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinatio
             </div>
           </div>
           <div class="etd border-right">
-            <div class="title">ETD</div>
+            <div class="title">{{ t('tracking.etd') }}</div>
             <div class="content">{{ formatTimezone(item.etd) }}</div>
           </div>
           <div class="eta">
-            <div class="title">ETA</div>
+            <div class="title">{{ t('tracking.eta') }}</div>
             <div class="content">{{ formatTimezone(item.eta) }}</div>
             <span
               :class="{ collapse: item.isCollapse }"
@@ -148,12 +121,12 @@ const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinatio
               </div>
               <div class="etd">
                 <span class="font_family icon-icon_date_b"></span>
-                <span>ETD: </span>
+                <span>{{ t('tracking.etd') }}: </span>
                 <span class="value">{{ formatTimezone(item.etd) }}</span>
               </div>
               <div class="atd">
                 <span class="font_family icon-icon_date_b"></span>
-                <span>ATD: </span>
+                <span>{{ t('tracking.atd') }}: </span>
                 <span class="value">{{ formatTimezone(item.atd) }}</span>
               </div>
             </div>
@@ -173,12 +146,12 @@ const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinatio
               </div>
               <div class="eta">
                 <span class="font_family icon-icon_date_b"></span>
-                <span>ETA: </span>
+                <span>{{ t('tracking.eta') }}: </span>
                 <span class="value">{{ formatTimezone(item.eta) }}</span>
               </div>
               <div class="ata">
                 <span class="font_family icon-icon_date_b"></span>
-                <span>ATA: </span>
+                <span>{{ t('tracking.ata') }}: </span>
                 <span class="value">{{ formatTimezone(item.ata) }}</span>
               </div>
             </div>

src/views/Tracking/src/components/TrackingDetail/src/components/TransportStep.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
 const props = defineProps({
   data: Object
 })
@@ -23,7 +27,7 @@ const handleTabClick = (name: string) => {
         id="driver-step-tracking-detail-2"
         @click="handleTabClick('shipmentStatus')"
       >
-        Shipment Status
+        {{ t('tracking.shipmentStatus') }}
       </div>
       <div
         v-if="props.data?.transportInfo?.mode !== 'Air Freight'"
@@ -32,7 +36,7 @@ const handleTabClick = (name: string) => {
         :class="{ 'is-active': activeName === 'containerStatus' }"
         @click="handleTabClick('containerStatus')"
       >
-        Container Status
+        {{ t('tracking.containerStatus') }}
       </div>
       <div v-else class="tab"></div>
     </div>

src/views/Tracking/src/components/TrackingGuide.vue

@@ -8,7 +8,9 @@ import customizeColumnsImgLight from '../image/customize-columns.png'
 import customizeColumnsImgDark from '../image/dark-customize-columns.png'
 import downloadFileImgLight from '../image/download-guide.png'
 import downloadFileImgDark from '../image/dark-download-guide.png'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const themeStore = useThemeStore()
 const customizeColumnsImg = computed(() => {
   return themeStore.theme === 'dark' ? customizeColumnsImgDark : customizeColumnsImgLight
@@ -25,12 +27,12 @@ const steps: any = [
     element: '#filters-container-guide',
     popover: {
       title: '',
-      description: `Frequently Used Search Criteria Display Area:
+      description: `${t('tracking.searchGuideTitle')}:
         <ul>
-          <li>Key Booking Status</li>
-          <li>Reference Numbers</li>
-          <li>Transport Mode</li>
-          <li>Date Type & Range</li>
+          <li>${t('tracking.searchGuideStatus')}</li>
+          <li>${t('tracking.searchGuideRef')}</li>
+          <li>${t('tracking.searchGuideMode')}</li>
+          <li>${t('tracking.searchGuideRange')}</li>
         </ul>`,
       side: 'bottom'
     }
@@ -41,8 +43,8 @@ const steps: any = [
       title: '',
       description: `
         <ul>
-          <li>Selected query criteria display area</li>
-          <li>You can quickly clear selected conditions at this position</li>
+          <li>${t('tracking.filterGuideArea')}</li>
+          <li>${t('tracking.filterGuideClear')}</li>
         </ul>
       `,
       side: 'bottom'
@@ -58,7 +60,7 @@ const steps: any = [
     element: '#more-filters-guide',
     popover: {
       title: '',
-      description: 'Click "More Filters" to see more search options.',
+      description: t('tracking.moreFiltersGuide'),
       side: 'left'
     }
   },
@@ -66,8 +68,7 @@ const steps: any = [
     element: '.hbol-guide-header',
     popover: {
       title: '',
-      description:
-        'Click on the HBL No. or double-click anywhere on a single shipment data to enter the detailed page.',
+      description: t('tracking.hblGuide'),
       side: 'bottom'
     }
   },
@@ -77,8 +78,8 @@ const steps: any = [
       title: '',
       description: `
         <ul>
-          <li>View the number of shipments selected for download</li>
-          <li>Two download list templates are available</li>
+          <li>${t('tracking.downloadGuideCount')}</li>
+          <li>${t('tracking.downloadGuideTpl')}</li>
         </ul>
       `,
       side: 'bottom'
@@ -90,9 +91,9 @@ const steps: any = [
       title: '',
       description: `
         <ul>
-          <li>Drag to right to add columns</li>
-          <li>Drag to left to unselect columns</li>
-          <li>Drag up and down to reorder or select/unselect</li>
+          <li>${t('tracking.columnsGuideRight')}</li>
+          <li>${t('tracking.columnsGuideLeft')}</li>
+          <li>${t('tracking.columnsGuideOrder')}</li>
         </ul>
       `,
       side: 'bottom'
@@ -102,8 +103,7 @@ const steps: any = [
     element: '#page-guide-btn-guide',
     popover: {
       title: '',
-      description:
-        'After closing, you can still click the "Page Guide" button to view the page guide of the current page.',
+      description: t('tracking.pageGuideDesc'),
       side: 'bottom'
     }
   }

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -468,11 +468,7 @@ const handleCustomizeColumns = () => {
       model_name: 'Ocean_Search'
     }
   }
-  CustomizeColumnsRef.value.openDialog(
-    params,
-    -220,
-    'Drag item over to this selection or click "add" icon to show the column on your shipment list'
-  )
+  CustomizeColumnsRef.value.openDialog(params, -220, t('tracking.customizeColumnsTip'))
 }
 
 // 定制表格