fix：仪表盘中英文适配

src/locales/langs/en-us.ts

@@ -645,7 +645,39 @@ const local: any = {
         clearOk: "Cleared Successfully",
         statusChange: "Are you sure you want the {text} {num} job?",
       }
-    }
+    },
+    carddata:{
+      sitelist:'Site List',
+      sitename:'NAME',
+      country:'COUNTRY/REGION',
+      alert:'ALERTS',
+      gateway:'GATEWAY',
+      switches:'SWITCHES',
+      clients:'CLIENTS',
+      search:'Search site name',
+    },
+    headerbanner:{
+      controller:'Controller Overview',
+      connected:'Connected',
+      cloud:'Cloud Access',
+      sites:'Sites',
+      totalsite:'Total Sites',
+      gateway:'Gateways',
+      switches:'Switches',
+      register:'Register Users',
+      online:'Online Users',
+      client:'Client',
+      alerts:'Alerts',
+      connect:'Connected',
+      disconnect:'Disconnected',
+      registuser:'Register',
+      onlineuser:'Online',
+      isolated:'Isolated',
+      wired:'Wired client',
+      wireless:'Wireless client',
+      guest:'Wireless Guest',
+      alert:'Alerts',
+    },
   },
   form: {
     required: 'Cannot be empty',

src/locales/langs/zh-cn.ts

@@ -645,7 +645,39 @@ const local:any = {
         clearOk: "清空成功",
         statusChange: "确定要{text} {num} 任务吗?",
       }
-    }
+    },
+    carddata:{
+      sitelist:'站点列表',
+      sitename:'站点名称',
+      country:'国家/地区',
+      alert:'警告',
+      gateway:'网关',
+      switches:'交换机',
+      clients:'装置',
+      search:'输入站点名称',
+    },
+    headerbanner:{
+      controller:'控制仪表盘',
+      connected:'连接',
+      cloud:'云访问',
+      sites:'站点',
+      totalsite:'站点数',
+      gateway:'网关',
+      switches:'交换机',
+      register:'注册用户',
+      online:'在线用户',
+      client:'装置',
+      alerts:'警告',
+      connect:'连接数',
+      disconnect:'断连数',
+      registuser:'注册用户数',
+      onlineuser:'在线用户数',
+      isolated:'隔离',
+      wired:'有线客户端',
+      wireless:'无线客户端',
+      guest:'无线访客',
+      alert:'告警数',
+    },
   },
   form: {
     required: '不能为空',

src/views/dashboard/modules/card-data.vue

@@ -10,8 +10,9 @@ import {
   SearchOutlined,
   PlusOutlined
 } from '@ant-design/icons-vue';
-
 import { getDashboardSiteList } from '@/service/api/auth';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 
 defineOptions({
   name: 'CardData'
@@ -65,27 +66,27 @@ watch([currentPage, pageSize, searchValue], () => {
 // 表格列定义
 const columns: TableColumnType<Api.DashboardSite>[] = [
   {
-    title: 'NAME',
+    title: t('page.carddata.sitename'),
     key: 'name',
     dataIndex: 'name'
   },
   {
-    title: 'COUNTRY/REGION',
+    title: t('page.carddata.country'),
     key: 'region',
     dataIndex: 'region'
   },
   {
-    title: 'ALERTS',
+    title: t('page.carddata.alert'),
     key: 'alerts',
     width: 100
   },
   {
-    title: 'GATEWAY',
+    title: t('page.carddata.gateway'),
     key: 'gateway',
     width: 100
   },
   {
-    title: 'SWITCHES',
+    title: t('page.carddata.switches'),
     key: 'switches',
     width: 100
   },
@@ -100,7 +101,7 @@ const columns: TableColumnType<Api.DashboardSite>[] = [
     width: 100
   },
   {
-    title: 'CLIENTS',
+    title: t('page.carddata.clients'),
     key: 'clients',
     width: 150
   },
@@ -146,12 +147,12 @@ const handlePageSizeChange = (size: number) => {
   <ACard :bordered="false" size="small" class="card-wrapper">
     <div class="flex justify-between items-center mb-16px">
       <div class="flex items-center gap-8px">
-        <span class="text-16px font-medium">Site List</span>
+        <span class="text-16px font-medium">{{ t('page.carddata.sitelist') }}</span>
       </div>
       <div class="flex items-center gap-16px">
         <AInput
           v-model:value="searchValue"
-          placeholder="Search Site Name"
+          :placeholder="t('page.carddata.search')"
           class="w-240px"
           allow-clear
         >

src/views/dashboard/modules/header-banner.vue

@@ -9,6 +9,8 @@ import {
 } from '@ant-design/icons-vue';
 import { computed, ref, onMounted } from 'vue';
 import { getDashboardOverview } from '@/service/api/auth';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 
 defineOptions({
   name: 'HeaderBanner'
@@ -119,7 +121,7 @@ const otherDevices = computed(() => ({
 
 <template>
   <ACard :bordered="false" class="card-wrapper">
-    <div class="text-16px font-bold mb-4px">Controller Overview</div>
+    <div class="text-16px font-bold mb-4px">{{ t('page.headerbanner.controller') }}</div>
     <ARow :gutter="[16, 16]">
       <ACol :span="24">
         <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8px">
@@ -129,11 +131,11 @@ const otherDevices = computed(() => ({
               <div class="size-48px flex-center bg-blue-50 rounded-lg">
                 <icon-mdi-cloud class="text-primary text-24px" />
               </div>
-              <div class="text-16px font-medium">Connected</div>
+              <div class="text-16px font-medium">{{ t('page.headerbanner.connected') }}</div>
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="text-12px text-gray-500">
-              Cloud Access
+              {{ t('page.headerbanner.cloud') }}
             </div>
           </div>
 
@@ -144,11 +146,11 @@ const otherDevices = computed(() => ({
                 <environment-outlined class="text-24px text-primary" />
                 <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ siteInfo.total }}</span>
               </div>
-              <div class="text-16px font-medium">Sites</div>
+              <div class="text-16px font-medium">{{ t('page.headerbanner.sites') }}</div>
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
-              <span>Total Sites: {{ siteInfo.total }}</span>
+              <span>{{ t('page.headerbanner.totalsite') }}: {{ siteInfo.total }}</span>
             </div>
           </div>
 
@@ -159,12 +161,12 @@ const otherDevices = computed(() => ({
                 <safety-outlined class="text-24px text-primary" />
                 <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.gateways.connected + otherDevices.gateways.disconnected }}</span>
               </div>
-              <div class="text-16px font-medium">Gateways</div>
+              <div class="text-16px font-medium">{{ t('page.headerbanner.gateway') }}</div>
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
-              <span>Connected: {{ otherDevices.gateways.connected }}</span>
-              <span>Disconnected: {{ otherDevices.gateways.disconnected }}</span>
+              <span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.gateways.connected }}</span>
+              <span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.gateways.disconnected }}</span>
             </div>
           </div>
 
@@ -175,12 +177,12 @@ const otherDevices = computed(() => ({
                 <hdd-outlined class="text-24px text-primary" />
                 <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.switches.connected + otherDevices.switches.disconnected }}</span>
               </div>
-              <div class="text-16px font-medium">Switches</div>
+              <div class="text-16px font-medium">{{ t('page.headerbanner.switches') }}</div>
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
-              <span>Connected: {{ otherDevices.switches.connected }}</span>
-              <span>Disconnected: {{ otherDevices.switches.disconnected }}</span>
+              <span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.switches.connected }}</span>
+              <span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.switches.disconnected }}</span>
             </div>
           </div>
 
@@ -195,8 +197,8 @@ const otherDevices = computed(() => ({
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
-              <span>Connected: {{ otherDevices.olts.connected }}</span>
-              <span>Disconnected: {{ otherDevices.olts.disconnected }}</span>
+              <span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.olts.connected }}</span>
+              <span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.olts.disconnected }}</span>
             </div>
           </div>
 
@@ -206,11 +208,11 @@ const otherDevices = computed(() => ({
               <div class="size-48px flex-center bg-blue-50 rounded-lg">
                 <user-add-outlined class="text-primary text-24px" />
               </div>
-              <div class="text-16px font-medium">Register Users</div>
+              <div class="text-16px font-medium">{{ t('page.headerbanner.register') }}</div>
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
-              <span>Register: {{ deviceStatus.users.registered }}</span>
+              <span>{{ t('page.headerbanner.registuser') }}: {{ deviceStatus.users.registered }}</span>
             </div>
           </div>
 
@@ -220,11 +222,11 @@ const otherDevices = computed(() => ({
               <div class="size-48px flex-center bg-green-50 rounded-lg">
                 <user-switch-outlined class="text-primary text-24px" />
               </div>
-              <div class="text-16px font-medium">Online Users</div>
+              <div class="text-16px font-medium">{{ t('page.headerbanner.online') }}</div>
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
-              <span>Online: {{ deviceStatus.users.online }}</span>
+              <span>{{ t('page.headerbanner.onlineuser') }}: {{ deviceStatus.users.online }}</span>
             </div>
           </div>
 
@@ -241,9 +243,9 @@ const otherDevices = computed(() => ({
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
-              <span>Connected: {{ deviceStatus.ap.connected }}</span>
-              <span>Disconnected: {{ deviceStatus.ap.disconnected }}</span>
-              <span>Isolated: {{ deviceStatus.ap.isolated }}</span>
+              <span>{{ t('page.headerbanner.connect') }}: {{ deviceStatus.ap.connected }}</span>
+              <span>{{ t('page.headerbanner.disconnect') }}: {{ deviceStatus.ap.disconnected }}</span>
+              <span>{{ t('page.headerbanner.isolated') }}: {{ deviceStatus.ap.isolated }}</span>
             </div>
           </div>
 
@@ -256,13 +258,13 @@ const otherDevices = computed(() => ({
                   {{ overviewData.totalClientNum }}
                 </span>
               </div>
-              <div class="text-16px font-medium">Client</div>
+              <div class="text-16px font-medium">{{ t('page.headerbanner.client') }}</div>
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
-              <span>Wired client: {{ deviceStatus.client.wiredUsers }}</span>
-              <span>Wireless client: {{ deviceStatus.client.wirelessUsers }}</span>
-              <span>Wireless Guests: {{ deviceStatus.client.wirelessGuests }}</span>
+              <span>{{ t('page.headerbanner.wired') }}: {{ deviceStatus.client.wiredUsers }}</span>
+              <span>{{ t('page.headerbanner.wireless') }}: {{ deviceStatus.client.wirelessUsers }}</span>
+              <span>{{ t('page.headerbanner.guest') }}: {{ deviceStatus.client.wirelessGuests }}</span>
             </div>
           </div>
 
@@ -272,11 +274,11 @@ const otherDevices = computed(() => ({
               <div class="size-48px flex-center bg-yellow-50 rounded-lg">
                 <icon-mdi-alert class="text-warning text-24px" />
               </div>
-              <div class="text-16px font-medium">Alerts</div>
+              <div class="text-16px font-medium">{{ t('page.headerbanner.alerts') }}</div>
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
-              <span>Alerts: {{ deviceStatus.alerts || 0 }}</span>
+              <span>{{ t('page.headerbanner.alert') }}: {{ deviceStatus.alerts || 0 }}</span>
             </div>
           </div>
         </div>