feat: 设备诊断页面的交互权限

src/components/device/device-card/ndm-alarm-host/alarm-host-card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { NdmAlarmHostResultVO, Station } from '@/apis';
 import { AlarmHostCurrentDiag, AlarmHostHistoryDiag, AlarmHostUpdate, DeviceRawCard } from '@/components';
+import { usePermission } from '@/composables';
+import { PERMISSION_TYPE_LITERALS } from '@/enums';
 import { useSettingStore } from '@/stores';
 import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
 import { storeToRefs } from 'pinia';
@@ -18,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { debugModeEnabled } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -45,7 +49,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-camera/camera-card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { NdmCameraResultVO, Station } from '@/apis';
 import { CameraCurrentDiag, CameraHistoryDiag, CameraUpdate, DeviceRawCard } from '@/components';
+import { usePermission } from '@/composables';
+import { PERMISSION_TYPE_LITERALS } from '@/enums';
 import { useSettingStore } from '@/stores';
 import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
 import { storeToRefs } from 'pinia';
@@ -18,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { debugModeEnabled } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -45,7 +49,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-decoder/decoder-card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { NdmDecoderResultVO, Station } from '@/apis';
 import { DecoderCurrentDiag, DecoderHistoryDiag, DecoderUpdate, DeviceRawCard } from '@/components';
+import { usePermission } from '@/composables';
+import { PERMISSION_TYPE_LITERALS } from '@/enums';
 import { useSettingStore } from '@/stores';
 import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
 import { storeToRefs } from 'pinia';
@@ -18,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { debugModeEnabled } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -45,7 +49,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-keyboard/keyboard-card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { NdmKeyboardResultVO, Station } from '@/apis';
 import { DeviceRawCard, KeyboardCurrentDiag, KeyboardHistoryDiag, KeyboardUpdate } from '@/components';
+import { usePermission } from '@/composables';
+import { PERMISSION_TYPE_LITERALS } from '@/enums';
 import { useSettingStore } from '@/stores';
 import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
 import { storeToRefs } from 'pinia';
@@ -18,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { debugModeEnabled } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -45,7 +49,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-nvr/nvr-card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { NdmNvrResultVO, Station } from '@/apis';
 import { DeviceRawCard, NvrCurrentDiag, NvrHistoryDiag, NvrUpdate } from '@/components';
+import { usePermission } from '@/composables';
+import { PERMISSION_TYPE_LITERALS } from '@/enums';
 import { useSettingStore } from '@/stores';
 import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
 import { storeToRefs } from 'pinia';
@@ -18,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { debugModeEnabled } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -45,7 +49,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-nvr/nvr-current-diag.vue

@@ -45,7 +45,7 @@ const diskArray = computed(() => lastDiagInfo.value?.info?.groupInfoList);
   <NFlex vertical>
     <DeviceHeaderCard :ndm-device="ndmDevice" :station="station" />
     <DeviceCommonCard :common-info="commonInfo" />
-    <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
+    <DeviceHardwareCard v-if="!isNvrCluster(ndmDevice)" :cpu-usage="cpuUsage" :mem-usage="memUsage" />
     <NvrDiskCard :disk-health="diskHealth" :disk-array="diskArray" />
     <NvrRecordCard v-if="isNvrCluster(ndmDevice)" :ndm-device="ndmDevice" :station="station" />
   </NFlex>

src/components/device/device-card/ndm-security-box/security-box-card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { NdmSecurityBoxResultVO, Station } from '@/apis';
 import { DeviceRawCard, SecurityBoxCurrentDiag, SecurityBoxHistoryDiag, SecurityBoxUpdate } from '@/components';
+import { usePermission } from '@/composables';
+import { PERMISSION_TYPE_LITERALS } from '@/enums';
 import { useSettingStore } from '@/stores';
 import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
 import { storeToRefs } from 'pinia';
@@ -18,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { debugModeEnabled } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -45,7 +49,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-server/server-card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { NdmServerResultVO, Station } from '@/apis';
 import { DeviceRawCard, ServerCurrentDiag, ServerHistoryDiag, ServerUpdate } from '@/components';
+import { usePermission } from '@/composables';
+import { PERMISSION_TYPE_LITERALS } from '@/enums';
 import { useSettingStore } from '@/stores';
 import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
 import { storeToRefs } from 'pinia';
@@ -18,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { debugModeEnabled } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -45,7 +49,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-switch/switch-card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { NdmSwitchResultVO, Station } from '@/apis';
 import { DeviceRawCard, SwitchCurrentDiag, SwitchHistoryDiag, SwitchUpdate } from '@/components';
+import { usePermission } from '@/composables';
+import { PERMISSION_TYPE_LITERALS } from '@/enums';
 import { useSettingStore } from '@/stores';
 import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
 import { storeToRefs } from 'pinia';
@@ -17,6 +19,7 @@ const router = useRouter();
 
 const settingStore = useSettingStore();
 const { debugModeEnabled } = storeToRefs(settingStore);
+const { hasPermission } = usePermission();
 
 const { ndmDevice, station } = toRefs(props);
 
@@ -45,7 +48,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-tree/device-tree.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { initStationDevices, type NdmDeviceResultVO, type NdmNvrResultVO, type Station } from '@/apis';
-import { useDeviceTree, type UseDeviceTreeReturn } from '@/composables';
+import { useDeviceTree, usePermission, type UseDeviceTreeReturn } from '@/composables';
-import { DEVICE_TYPE_NAMES, DEVICE_TYPE_LITERALS, tryGetDeviceType, type DeviceType } from '@/enums';
+import { DEVICE_TYPE_NAMES, DEVICE_TYPE_LITERALS, tryGetDeviceType, type DeviceType, PERMISSION_TYPE_LITERALS } from '@/enums';
 import { isNvrCluster } from '@/helpers';
-import { useDeviceStore, useStationStore } from '@/stores';
+import { useDeviceStore, usePermissionStore } from '@/stores';
 import { watchImmediate } from '@vueuse/core';
 import destr from 'destr';
 import { isFunction } from 'es-toolkit';
@@ -60,6 +60,8 @@ const { station, events, syncRoute, devicePrefixLabel } = toRefs(props);
 
 const themeVars = useThemeVars();
 
+const { hasPermission } = usePermission();
+
 const {
   // 设备选择
   selectedStationCode,
@@ -87,8 +89,8 @@ const onSelectDevice = (device: NdmDeviceResultVO, stationCode: Station['code'])
   emit('afterSelectDevice', device, stationCode);
 };
 
-const stationStore = useStationStore();
+const permissionStore = usePermissionStore();
-const { stations } = storeToRefs(stationStore);
+const stations = computed(() => permissionStore.stations.VIEW ?? []);
 const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);
 
@@ -220,13 +222,17 @@ const nodeProps: TreeProps['nodeProps'] = ({ option }) => {
       payload.stopPropagation();
       payload.preventDefault();
 
-      // 仅当事件列表包含 `manage` 时才显示右键菜单
+      // 如果事件列表不包含 `manage`，则直接结束逻辑
       if (!events.value?.includes('manage')) return;
 
-      const { clientX, clientY } = payload;
       const stationCode = option['stationCode'] as Station['code'];
+
+      // 仅当用户在该车站拥有操作权限时才显示右键菜单
+      if (!hasPermission(stationCode, PERMISSION_TYPE_LITERALS.OPERATION)) return;
+
       const deviceType = option['deviceType'] as DeviceType | undefined;
       const device = option['device'] as NdmDeviceResultVO | undefined;
+      const { clientX, clientY } = payload;
       contextmenu.value = { x: clientX, y: clientY, stationCode, deviceType, device };
       showContextmenu.value = true;
     },

src/pages/device-page.vue

@@ -3,13 +3,13 @@ import type { NdmDeviceResultVO, Station } from '@/apis';
 import { DeviceRenderer, DeviceTree, type DeviceTreeProps } from '@/components';
 import type { UseDeviceSelectionReturn } from '@/composables';
 import { SELECT_DEVICE_FN_INJECTION_KEY } from '@/constants';
-import { useStationStore } from '@/stores';
+import { usePermissionStore } from '@/stores';
 import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui';
-import { storeToRefs } from 'pinia';
+import { computed, provide, ref } from 'vue';
-import { provide, ref } from 'vue';
 
-const stationStore = useStationStore();
+const permissionStore = usePermissionStore();
-const { stations } = storeToRefs(stationStore);
+
+const stations = computed(() => permissionStore.stations.VIEW ?? []);
 
 const selectedStation = ref<Station>();
 const selectedDevice = ref<NdmDeviceResultVO>();