diff --git a/src/components/device-page/device-renderer.vue b/src/components/device-page/device-renderer.vue
new file mode 100644
index 0000000..f8ff51e
--- /dev/null
+++ b/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>
diff --git a/src/pages/device-page.vue b/src/pages/device-page.vue
index 85937ed..a376cf0 100644
--- a/src/pages/device-page.vue
+++ b/src/pages/device-page.vue
@@ -1,15 +1,6 @@
 <script setup lang="ts">
-import CameraCard from '@/components/device-page/camera-card.vue';
-import DecoderCard from '@/components/device-page/decoder-card.vue';
-import DeviceTree from '@/components/device-page/device-tree.vue';
-import KeyboardCard from '@/components/device-page/keyboard-card.vue';
-import NvrCard from '@/components/device-page/nvr-card.vue';
-import SecurityBoxCard from '@/components/device-page/security-box-card.vue';
-import ServerCard from '@/components/device-page/server-card.vue';
-import SwitchCard from '@/components/device-page/switch-card.vue';
 import { useDeviceSelection } from '@/composables/device';
 import { useLineDevicesQuery } from '@/composables/query';
-import { DeviceType, type DeviceTypeVal } from '@/enums/device-type';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { useStationStore } from '@/stores/station';
 import { ChevronBack } from '@vicons/ionicons5';
@@ -18,6 +9,9 @@ import { storeToRefs } from 'pinia';
 import { onMounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
+import DeviceTree from '@/components/device-page/device-tree.vue';
+import DeviceRenderer from '@/components/device-page/device-renderer.vue';
+
 // 数据获取
 const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
 const stationStore = useStationStore();
@@ -89,31 +83,11 @@ watch(
           </NPageHeader>
         </div>
 
-        <div style="flex: 1 1 auto; min-height: 0; padding-left: 24px">
+        <div style="flex: 1 1 auto; min-height: 0">
           <!-- 内容区域 -->
           <template v-if="selectedDevice && selectedStationCode">
-            <NScrollbar x-scrollable style="height: 100%; padding-right: 24px">
-              <template v-if="selectedDeviceType === DeviceType.Camera">
-                <CameraCard :station-code="selectedStationCode" :ndm-camera="selectedDevice" />
-              </template>
-              <template v-if="selectedDeviceType === DeviceType.Decoder">
-                <DecoderCard :station-code="selectedStationCode" :ndm-decoder="selectedDevice" />
-              </template>
-              <template v-if="selectedDeviceType === DeviceType.Keyboard">
-                <KeyboardCard :station-code="selectedStationCode" :ndm-keyboard="selectedDevice" />
-              </template>
-              <template v-if="selectedDeviceType === DeviceType.Nvr">
-                <NvrCard :station-code="selectedStationCode" :ndm-nvr="selectedDevice" />
-              </template>
-              <template v-if="selectedDeviceType === DeviceType.SecurityBox">
-                <SecurityBoxCard :station-code="selectedStationCode" :ndm-security-box="selectedDevice" />
-              </template>
-              <template v-if="([DeviceType.MediaServer, DeviceType.VideoServer] as DeviceTypeVal[]).includes(selectedDeviceType)">
-                <ServerCard :station-code="selectedStationCode" :ndm-server="selectedDevice" />
-              </template>
-              <template v-if="selectedDeviceType === DeviceType.Switch">
-                <SwitchCard :station-code="selectedStationCode" :ndm-switch="selectedDevice" />
-              </template>
+            <NScrollbar x-scrollable style="height: 100%" :content-style="{ 'padding-right': '24px' }">
+              <DeviceRenderer :station-code="selectedStationCode" :device="selectedDevice" />
             </NScrollbar>
           </template>
           <template v-else>