perf(views): 优化“设备分组”页面代码逻辑

src/types/index.ts

@@ -84,6 +84,12 @@ export interface DictValue {
   isDefault: boolean | null;
 }
 
+export interface TabComponent {
+  key: string;
+  name: string;
+  component: Component;
+}
+
 export interface DevGroupTabCompProps {
   deviceGroupId: number;
 }

src/views/device-group/DeviceGroup.vue

@@ -5,14 +5,9 @@ import { useRoute, useRouter } from 'vue-router';
 import DeviceWorkStatus from '@/views/device-work-status/DeviceWorkStatus.vue';
 import RealTimeMonitor from '@/views/real-time-monitor/RealTimeMonitor.vue';
 import { useRefreshView } from '@/hooks/refresh-view';
-import { translateNavigation } from '@/utils';
+import { t } from '@/i18n';
 
-import type { Component } from 'vue';
-
-interface TabComponent {
-  name: string;
-  component: Component;
-}
+import type { TabComponent } from '@/types';
 
 const router = useRouter();
 const route = useRoute();
@@ -23,23 +18,27 @@ const deviceGroupId = computed(() => {
   return route.params.id as string;
 });
 
-const aiSmartCtrlTabs: TabComponent[] = [
-  {
-    name: 'realTimeMonitor',
-    component: RealTimeMonitor,
-  },
-  {
-    name: 'deviceWorkStatus',
-    component: DeviceWorkStatus,
-  },
-];
+const aiSmartCtrlTabs = computed<TabComponent[]>(() => {
+  return [
+    {
+      key: 'realTimeMonitor',
+      name: t('navigation.realTimeMonitor'),
+      component: RealTimeMonitor,
+    },
+    {
+      key: 'deviceWorkStatus',
+      name: t('navigation.deviceWorkStatus'),
+      component: DeviceWorkStatus,
+    },
+  ];
+});
 
 watch(deviceGroupId, () => {
   refreshView();
 });
 
 onMounted(() => {
-  activeKey.value = (route.query.tab as string) ?? aiSmartCtrlTabs[0].name;
+  activeKey.value = (route.query.tab as string) ?? aiSmartCtrlTabs.value[0].key;
   refreshView();
 });
 
@@ -59,7 +58,7 @@ const handleTabClick = (activeKey: string | number) => {
 <template>
   <div class="device-group-container">
     <ATabs class="device-group-tab" v-model:active-key="activeKey" @tab-click="handleTabClick">
-      <ATabPane v-for="item in aiSmartCtrlTabs" :key="item.name" :tab="translateNavigation(item.name)">
+      <ATabPane v-for="item in aiSmartCtrlTabs" :key="item.key" :tab="item.name">
         <component v-if="renderView" :is="item.component" :device-group-id="Number(deviceGroupId)" />
       </ATabPane>
     </ATabs>