From cbeddebbc0b7b0f7d3cc216a32e9af659d610e08 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Mon, 1 Jun 2026 03:19:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor(alarm-tree,=20camera-tree):=20?=
 =?UTF-8?q?=E6=95=B4=E5=90=88=E8=8A=82=E7=82=B9=E5=9B=BE=E6=A0=87=E5=88=B0?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E5=B9=B6=E4=BC=98=E5=8C=96=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为树形节点标签添加弹性布局以正确对齐图标与文字，将图标渲染逻辑从单独的前缀函数整合到标签渲染函数中，为摄像机树形组件新增按类型匹配对应图标的逻辑，并移除了冗余的前缀渲染属性与函数
---
 src/pages/vimp/components/alarm-tree.vue  | 12 ++++--------
 src/pages/vimp/components/camera-tree.vue | 18 +++++-------------
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/pages/vimp/components/alarm-tree.vue b/src/pages/vimp/components/alarm-tree.vue
index 49ecffc..391542d 100644
--- a/src/pages/vimp/components/alarm-tree.vue
+++ b/src/pages/vimp/components/alarm-tree.vue
@@ -52,6 +52,9 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
     const alarmNodeStyle: CSSProperties = {
       opacity: alarmOnline() ? 1 : 0.5,
       cursor: alarmOnline() ? 'pointer' : 'not-allowed',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
     };
     return h(
       'div',
@@ -70,7 +73,7 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
           event.dataTransfer?.setData('name', alarm.name);
         },
       },
-      alarm.name,
+      [h(NIcon, () => h(SirenIcon)), h('span', alarm.name)],
     );
   }
 
@@ -78,11 +81,6 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
   return option.label;
 };
 
-const renderNodePrefix: TreeProps['renderPrefix'] = ({ option }) => {
-  if (!isAlarmNode(option)) return null;
-  return h(NIcon, () => h(SirenIcon));
-};
-
 const renderNodeSuffix: TreeProps['renderSuffix'] = ({ option }) => {
   if (isAlarmSiteNode(option)) {
     const { online, offline, total } = option.stats;
@@ -119,7 +117,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
       virtual-scroll
       style="height: 100%"
       :render-label="renderNodeLabel"
-      :render-prefix="renderNodePrefix"
       :render-suffix="renderNodeSuffix"
       :override-default-node-click-behavior="overrideNodeClickBehavior"
       :default-expand-all="searchPattern.trim().length > 0"
@@ -139,7 +136,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
           virtual-scroll
           style="height: 100%"
           :render-label="renderNodeLabel"
-          :render-prefix="renderNodePrefix"
           :render-suffix="renderNodeSuffix"
           :override-default-node-click-behavior="overrideNodeClickBehavior"
           :default-expand-all="false"
diff --git a/src/pages/vimp/components/camera-tree.vue b/src/pages/vimp/components/camera-tree.vue
index d1e1be9..97bc24e 100644
--- a/src/pages/vimp/components/camera-tree.vue
+++ b/src/pages/vimp/components/camera-tree.vue
@@ -54,7 +54,11 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
     const cameraNodeStyle: CSSProperties = {
       opacity: cameraOnline() ? 1 : 0.5,
       cursor: cameraOnline() ? 'pointer' : 'not-allowed',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
     };
+    const cameraIcon = option.type === '004' ? h(NIcon, () => h(PtzCamera)) : option.type === '005' ? h(NIcon, () => h(HemiPtzCamera)) : option.type === '006' ? h(NIcon, () => h(BulletCamera)) : null;
     return h(
       'div',
       {
@@ -72,7 +76,7 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
           event.dataTransfer?.setData('name', camera.name);
         },
       },
-      camera.name,
+      [cameraIcon, h('span', camera.name)],
     );
   }
 
@@ -80,16 +84,6 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
   return option.label;
 };
 
-const renderNodePrefix: TreeProps['renderPrefix'] = ({ option }) => {
-  if (!isCameraNode(option)) return null;
-
-  if (option.type === '004') return h(NIcon, () => h(PtzCamera));
-  if (option.type === '005') return h(NIcon, () => h(HemiPtzCamera));
-  if (option.type === '006') return h(NIcon, () => h(BulletCamera));
-
-  return null;
-};
-
 const renderNodeSuffix: TreeProps['renderSuffix'] = ({ option }) => {
   if (isCameraSiteNode(option)) {
     const { online, offline, total } = option.stats;
@@ -126,7 +120,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
       virtual-scroll
       style="height: 100%"
       :render-label="renderNodeLabel"
-      :render-prefix="renderNodePrefix"
       :render-suffix="renderNodeSuffix"
       :override-default-node-click-behavior="overrideNodeClickBehavior"
       :default-expand-all="searchPattern.trim().length > 0"
@@ -146,7 +139,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
           virtual-scroll
           style="height: 100%"
           :render-label="renderNodeLabel"
-          :render-prefix="renderNodePrefix"
           :render-suffix="renderNodeSuffix"
           :override-default-node-click-behavior="overrideNodeClickBehavior"
           :default-expand-all="false"