refactor(components): extract component helpers

src/components/device-page/device-card/current-diag-card/switch-port-card.vue

@@ -15,8 +15,8 @@
  * - 响应式数据处理和布局
  */
 
-import { getPortStatusVal, transformPortSpeed } from '../../helper';
 import type { NdmSwitchPortInfo } from '@/apis/domains';
+import { getPortStatusVal, transformPortSpeed } from '@/components/helper';
 import { NCard, NGrid, NGridItem, NPopover } from 'naive-ui';
 import { computed, toRefs } from 'vue';
 

src/components/device-page/device-card/history-diag-card/device-alarm-history-diag-card.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { NdmDeviceAlarmLogResultVO, NdmDeviceResultVO, NdmNvrResultVO, PageParams } from '@/apis/models';
+import type { NdmDeviceAlarmLogResultVO, NdmDeviceResultVO, PageParams } from '@/apis/models';
 import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
-import { DeviceType, tryGetDeviceTypeVal } from '@/enums/device-type';
+import { renderAlarmDateCell, renderAlarmTypeCell, renderFaultDescriptionCell, renderFaultLevelCell } from '@/components/helper';
 import { useMutation } from '@tanstack/vue-query';
-import dayjs from 'dayjs';
-import { NButton, NCard, NDataTable, NPopover, NScrollbar, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
+import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
 import { h } from 'vue';
 import { reactive, ref, toRefs } from 'vue';
 
@@ -21,66 +20,25 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   {
     title: '告警时间',
     key: 'alarmDate',
-    render: (rowData /* , rowIndex */) => {
-      return dayjs(Number(rowData.alarmDate ?? 0)).format('YYYY-MM-DD HH:mm:ss');
-    },
+    render: renderAlarmDateCell,
   },
-  { title: '告警类型', key: 'alarmType', align: 'center' },
-  { title: '故障级别', key: 'faultLevel', align: 'center' },
-  { title: '故障编码', key: 'faultCode', align: 'center' },
+  {
+    title: '告警类型',
+    key: 'alarmType',
+    align: 'center',
+    render: renderAlarmTypeCell,
+  },
+  {
+    title: '故障级别',
+    key: 'faultLevel',
+    align: 'center',
+    render: renderFaultLevelCell,
+  },
+  // { title: '故障编码', key: 'faultCode', align: 'center' },
   {
     title: '故障描述',
     key: 'faultDescription',
-    render: (rowData) => {
-      const isNvrCluster = (ndmDevice: NdmDeviceResultVO) => {
-        const deviceTypeVal = tryGetDeviceTypeVal(ndmDevice.deviceType);
-        if (!deviceTypeVal) return false;
-        const isNvr = deviceTypeVal === DeviceType.Nvr;
-        if (!isNvr) return false;
-        const maybeNvrCluster = ndmDevice as NdmNvrResultVO;
-        return !!maybeNvrCluster.clusterList?.trim() && maybeNvrCluster.clusterList !== maybeNvrCluster.ipAddress;
-      };
-      if (!isNvrCluster(ndmDevice.value)) {
-        return rowData.faultDescription;
-      }
-      return h(
-        NPopover,
-        {
-          trigger: 'click',
-        },
-        {
-          trigger: () => {
-            return h(
-              NButton,
-              {
-                text: true,
-                type: 'info',
-              },
-              {
-                default: () => '查看',
-              },
-            );
-          },
-          default: () => {
-            return h(
-              // 'pre',
-              NScrollbar,
-              {
-                style: {
-                  width: '800px',
-                  'max-height': '400px',
-                },
-              },
-              {
-                default: () => {
-                  return h('pre', {}, { default: () => rowData.faultDescription?.split('; ').join('\n') ?? '' });
-                },
-              },
-            );
-          },
-        },
-      );
-    },
+    render: (rowData) => renderFaultDescriptionCell(rowData, ndmDevice.value),
   },
   {
     title: '是否恢复',

src/components/device-page/device-card/history-diag-card/switch-port-history-diag-card.vue

@@ -2,12 +2,12 @@
 import type { NdmSwitchDiagInfo, NdmSwitchPortInfo } from '@/apis/domains';
 import type { NdmSwitchResultVO, PageParams } from '@/apis/models';
 import { postSnmpLogPage } from '@/apis/requests';
+import { getPortStatusVal, transformPortSpeed } from '@/components/helper';
 import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import destr from 'destr';
 import { NButton, NCard, NDataTable, NModal, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
 import { h, reactive, ref, toRefs } from 'vue';
-import { getPortStatusVal, transformPortSpeed } from '../../helper';
 
 const props = defineProps<{
   stationCode: string;