大屏页面初始化

screen-vue/src/views/system/menu/index.vue

@@ -7,31 +7,113 @@
   >
     <template #sidebar>
       <div class="sidebar-content">
-       
+        <FilterTree
+          ref="filterTreeRef"
+          :tree-data="treeData"
+          :default-expand-all="false"
+          :auto-height="true"
+          :min-height="'100%'"
+          @node-click="handleNodeClick"
+          @search-change="handleSearchChange"
+        />
       </div>
     </template>
     <template #main>
       <div class="main-content">
-		  <vMeun />
+        <vMeun />
       </div>
     </template>
   </ResizablePage>
 </template>
 
-<script setup>
-import { ref } from 'vue'
+<script lang="ts" setup>
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import ResizablePage from '@/components/Layout/proResizable.vue'
+import FilterTree, { type FilterTreeNode } from '@/components/Table/proFilterTree.vue'
 import vMeun from './list.vue'
+
+const treeData = ref<FilterTreeNode[]>([
+  {
+    id: 1,
+    label: 'Level one 1',
+    children: [
+      {
+        id: 4,
+        label: 'Level two 1-1',
+        children: [
+          { id: 9, label: 'Level three 1-1-1' },
+          { id: 10, label: 'Level three 1-1-2' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: 'Level one 2',
+    children: [
+      { id: 5, label: 'Level two 2-1' },
+      { id: 6, label: 'Level two 2-2' },
+    ],
+  },
+  {
+    id: 3,
+    label: 'Level one 3',
+    children: [
+      { id: 7, label: 'Level two 3-1' },
+      { id: 8, label: 'Level two 3-2' },
+    ],
+  },
+])
+
+const filterTreeRef = ref<InstanceType<typeof FilterTree> | null>(null)
+
+const handleNodeClick = (data: FilterTreeNode) => {
+  const nodeInfo = {
+    id: data.id,
+    label: data.label,
+    isLeaf: !data.children || data.children.length === 0,
+  }
+  console.log('=== 点击节点信息 ===', nodeInfo)
+}
+
+let searchDebounceTimer: number | null = null
+const handleSearchChange = (value: string) => {
+  if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
+  searchDebounceTimer = window.setTimeout(() => {
+    console.log('搜索关键词（防抖后）：', value.trim())
+  }, 300)
+}
+
+onMounted(() => {
+  const cleanup = () => {
+    if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
+  }
+  onUnmounted(cleanup)
+})
 </script>
 
 <style scoped>
-.sidebar-content {
+.sidebar-content, .main-content {
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 0;
 }
 
-.main-content {
-  padding: 0px;
+:deep(.el-tree) {
   height: 100%;
+  overflow-y: auto;
+}
+
+:deep(.el-tree::-webkit-scrollbar) {
+  width: 6px;
+}
+:deep(.el-tree::-webkit-scrollbar-thumb) {
+  background-color: #e5e7eb;
+  border-radius: 3px;
+}
+:deep(.el-tree::-webkit-scrollbar-track) {
+  background-color: #f9fafb;
 }
 </style>