From 7b15300ab7d11ac63e57d7d5bdd180145d560c29 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Fri, 29 May 2026 00:35:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(resource-pannel):=20=E4=B8=BA=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E9=9D=A2=E6=9D=BF=E6=B7=BB=E5=8A=A0=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=A1=B5=E5=9B=BE=E6=A0=87=E5=92=8C=E6=96=B0=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=EF=BC=8C=E6=B8=85=E7=90=86=E6=9C=AA=E4=BD=BF=E7=94=A8=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化资源面板标签页布局，将图标置于文字上方
- 新增复合技和地图两个标签页
更新标签页数据结构以支持图标配置
移除未使用的naive-ui和vueuse依赖导入
---
 src/pages/vimp/components/resource-pannel.vue | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/pages/vimp/components/resource-pannel.vue b/src/pages/vimp/components/resource-pannel.vue
index 3de5e23..a789fee 100644
--- a/src/pages/vimp/components/resource-pannel.vue
+++ b/src/pages/vimp/components/resource-pannel.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { NButton, NFlex, NIcon, NInput, NPageHeader, NTabPane, NTabs, NText, type TabPaneProps } from 'naive-ui';
+import { NButton, NIcon, NInput, NTabPane, NTabs, NText, type TabPaneProps } from 'naive-ui';
 import { computed, ref, type Component } from 'vue';
 import AlarmTree from './alarm-tree.vue';
 import CameraTree from './camera-tree.vue';
-import { ChevronLeftIcon, PanelBottom } from 'lucide-vue-next';
+import { ChevronLeftIcon, MapPinIcon, MapPinnedIcon, MonitorIcon, SirenIcon, WandSparklesIcon } from 'lucide-vue-next';
 import { useResourcePanelStore } from '../stores';
-import { watchImmediate } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
+import BulletCamera from './icon/bullet-camera.vue';
 
 const PANEL_WIDTH_EXPANDED = '480px';
 const PANEL_WIDTH_COLLAPSED = '72px';
@@ -14,13 +14,16 @@ const PANEL_WIDTH_COLLAPSED = '72px';
 interface ResourceTabPane extends TabPaneProps {
   name: string;
   tab: string;
+  icon?: Component;
   component?: Component;
 }
 
 const resourceTabPanes: ResourceTabPane[] = [
-  { name: 'camera', tab: '摄像头', component: CameraTree },
-  { name: 'alarm', tab: '警报器', component: AlarmTree },
-  { name: 'monitor', tab: '监视器' },
+  { name: 'camera', tab: '摄像头', icon: BulletCamera, component: CameraTree },
+  { name: 'alarm', tab: '警报器', icon: SirenIcon, component: AlarmTree },
+  { name: 'monitor', tab: '监视器', icon: MonitorIcon },
+  { name: 'combine-tech', tab: '复合技', icon: WandSparklesIcon },
+  { name: 'leaflet-map', tab: '地图', icon: MapPinnedIcon },
 ];
 
 const activeTabName = ref(resourceTabPanes.at(0)?.name ?? '');
@@ -91,14 +94,21 @@ const expandResourcePanel = () => {
           }"
         >
           <NTabPane
-            v-for="{ name: resourceName, tab: resourceTab, component } in resourceTabPanes"
+            v-for="{ name: resourceName, tab: resourceTab, icon: resourceIcon, component } in resourceTabPanes"
             :key="resourceName"
-            :tab="resourceTab"
             :name="resourceName"
             :tab-props="{ onClick: () => expandResourcePanel() }"
           >
-            <template v-if="!!component">
-              <component :is="component" />
+            <template #tab>
+              <div style="width: 48px; display: flex; flex-direction: column; justify-content: center; align-items: center">
+                <NIcon :size="18" :component="resourceIcon"></NIcon>
+                <div style="font-size: 12px">{{ resourceTab }}</div>
+              </div>
+            </template>
+            <template #default>
+              <template v-if="!!component">
+                <component :is="component" />
+              </template>
             </template>
           </NTabPane>
         </NTabs>