refactor: extract DeviceRenderer

src/components/device-page/device-renderer.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { NdmDeviceResultVO } from '@/apis/models';
+import { DeviceType, getDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
+import { computed, toRefs } from 'vue';
+
+import CameraCard from './device-card/camera-card.vue';
+import DecoderCard from './device-card/decoder-card.vue';
+import KeyboardCard from './device-card/keyboard-card.vue';
+import NvrCard from './device-card/nvr-card.vue';
+import SecurityBoxCard from './device-card/security-box-card.vue';
+import ServerCard from './device-card/server-card.vue';
+import SwitchCard from './device-card/switch-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  device: NdmDeviceResultVO;
+}>();
+
+const { stationCode, device } = toRefs(props);
+
+const deviceTypeVal = computed(() => getDeviceTypeVal(device.value.deviceType));
+</script>
+
+<template>
+  <template v-if="deviceTypeVal === DeviceType.Camera">
+    <CameraCard :station-code="stationCode" :ndm-camera="device" />
+  </template>
+  <template v-if="deviceTypeVal === DeviceType.Decoder">
+    <DecoderCard :station-code="stationCode" :ndm-decoder="device" />
+  </template>
+  <template v-if="deviceTypeVal === DeviceType.Keyboard">
+    <KeyboardCard :station-code="stationCode" :ndm-keyboard="device" />
+  </template>
+  <template v-if="deviceTypeVal === DeviceType.Nvr">
+    <NvrCard :station-code="stationCode" :ndm-nvr="device" />
+  </template>
+  <template v-if="deviceTypeVal === DeviceType.SecurityBox">
+    <SecurityBoxCard :station-code="stationCode" :ndm-security-box="device" />
+  </template>
+  <template v-if="([DeviceType.MediaServer, DeviceType.VideoServer] as DeviceTypeVal[]).includes(deviceTypeVal)">
+    <ServerCard :station-code="stationCode" :ndm-server="device" />
+  </template>
+  <template v-if="deviceTypeVal === DeviceType.Switch">
+    <SwitchCard :station-code="stationCode" :ndm-switch="device" />
+  </template>
+</template>
+
+<style scoped lang="scss"></style>