TechTabPane组件新增loading状态

  1. TechTabPane组件新增loading prop，数据未加载时显示"加载中..."提示
  2. 两个页面的总览、路口、干线tab统一使用:loading绑定替代原有v-if/v-else写法

src/components/ui/TechTabPane.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="tech-tab-pane" v-show="active">
-    <slot></slot>
+    <div v-if="loading" class="tab-pane-loading">加载中...</div>
+    <slot v-else></slot>
   </div>
 </template>
 
@@ -9,7 +10,8 @@ export default {
   name: 'TechTabPane',
   props: {
     label: { type: String, required: true }, // 头部显示的文字
-    name: { type: [String, Number], required: true } // 唯一标识符
+    name: { type: [String, Number], required: true }, // 唯一标识符
+    loading: { type: Boolean, default: false }
   },
   computed: {
     // 核心：动态判断自己是否被选中
@@ -40,4 +42,13 @@ export default {
   display: flex;
   flex-direction: column;
 }
+
+.tab-pane-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+  color: #758599;
+  font-size: 14px;
+}
 </style>

src/views/StatusMonitoring.vue

@@ -30,15 +30,15 @@
             <!-- 左侧Tab菜单栏 -->
             <div class="left-sidebar-wrap" v-if="currentView !== 'list-mode'">
                 <TechTabs v-model="activeLeftTab" type="underline" @tab-click="handleTabClick">
-                    <TechTabPane label="总览" name="overview" class="menu-scroll-view">
+                    <TechTabPane label="总览" name="overview" class="menu-scroll-view" :loading="menuData.length === 0">
                         <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
                             @node-click="handleMenuClick" @folder-click="handleFolderClick"/>
                     </TechTabPane>
-                    <TechTabPane label="路口" name="crossing" class="menu-scroll-view">
+                    <TechTabPane label="路口" name="crossing" class="menu-scroll-view" :loading="menuData.length === 0">
                         <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
                             @node-click="handleMenuClick" />
                     </TechTabPane>
-                    <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view">
+                    <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view" :loading="trunkLineMenuData.length === 0">
                         <MenuItem v-for="item in trunkLineMenuData" :key="item.id" :node="item" :level="0"
                             @node-click="handleTrunkLineClick">
                         <template #label="{ node }">

src/views/TrunkCoordination.vue

@@ -30,15 +30,15 @@
             <!-- 左侧Tab菜单栏 -->
             <div class="left-sidebar-wrap" v-if="currentView !== 'list-mode'">
                 <TechTabs v-model="activeLeftTab" type="underline" @tab-click="handleTabClick">
-                    <TechTabPane label="总览" name="overview" class="menu-scroll-view">
+                    <TechTabPane label="总览" name="overview" class="menu-scroll-view" :loading="menuData.length === 0">
                         <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
                             @node-click="handleMenuClick" @folder-click="handleFolderClick"/>
                     </TechTabPane>
-                    <TechTabPane label="路口" name="crossing" class="menu-scroll-view">
+                    <TechTabPane label="路口" name="crossing" class="menu-scroll-view" :loading="menuData.length === 0">
                         <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
                             @node-click="handleMenuClick" />
                     </TechTabPane>
-                    <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view">
+                    <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view" :loading="trunkLineMenuData.length === 0">
                         <MenuItem v-for="item in trunkLineMenuData" :key="item.id" :node="item" :level="0"
                             @node-click="handleTrunkLineClick">
                         <template #label="{ node }">