dtScreen/src/components/ui/SidebarMenu.vue

<template>
  <div class="sidebar-container">
    <MenuItem 
      v-for="item in menuData" 
      :key="item.id" 
      :node="item" 
      @node-click="handleLeafNodeClick"
    />
  </div>
</template>

<script>
// 引入刚刚写的递归组件
import MenuItem from './MenuItem.vue';
import { apiGetMenuTree } from '@/api';

export default {
  name: 'SidebarMenu',
  components: {
    MenuItem
  },
  data() {
    return {
      menuData: []
    };
  },
  async mounted() {
    this.menuData = await apiGetMenuTree() || [];
  },
  methods: {
    // 捕获最底层路口的点击事件
    handleLeafNodeClick(nodeData) {
      console.log('用户点击了最底层路口:', nodeData);
      this.$emit('leaf-node-click', nodeData); // 将事件和数据传递给父组件
      // 在大屏项目中，通常下一步是：
      // 1. 触发全局状态管理 (Vuex/Pinia) 记录当前选中的路口 ID
      // 2. 命令地图组件平移/放大到该路口的经纬度 (nodeData.lng, nodeData.lat)
      // 3. 通知右侧图表组件重新拉取该路口的数据
    }
  }
};
</script>

<style scoped>
/* 整个侧边栏的深色背景 */
.sidebar-container {
  width: 100%;
  height: 100%;
  background-color: #112445; /* 匹配截图中的深海蓝色 */
  overflow-y: auto;
  overflow-x: hidden;
}

/* 自定义滚动条样式，适配暗黑风 */
.sidebar-container::-webkit-scrollbar {
  width: 6px;
}
.sidebar-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.sidebar-container::-webkit-scrollbar-track {
  background: transparent;
}
</style>