导航栏/菜单栏显示逻辑修改

frontend/src/views/home/components/tree.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="plan_tree">
+    <el-input
+      placeholder="请输入计划名称"
+      v-model="searchForm.planName"
+    ></el-input>
+    <el-tree
+      :data="data"
+      ref="treeRef"
+      :filter-node-method="filterNode"
+      :props="defaultProps"
+      node-key="id"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, defineExpose, watch } from "vue";
+const data: any = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "name",
+};
+const searchForm = ref({
+  planName: "",
+});
+const getTreeData = (val: any) => {
+  console.log(val, ",,,,");
+  data.value = val;
+};
+const filterText = ref("");
+const treeRef = ref();
+watch(
+  () => searchForm.value.planName,
+  (val) => {
+    treeRef.value!.filter(val);
+  },
+  {
+    deep: true,
+  }
+);
+const handleNodeClick = (data) => {
+  console.log(data);
+};
+const filterNode = (value: string, data) => {
+  if (!value) return true;
+  return data.name.includes(value);
+};
+onMounted(() => {
+  console.log();
+});
+defineExpose({ getTreeData });
+</script>
+<style lang="scss" scoped>
+.plan_tree {
+  width: 200px;
+  height: 100%;
+  //   display: flex;
+  //   flex-direction: column;
+  padding: 5px;
+  .el-input {
+    width: 100%;
+    // height: 40px;
+    margin:0 10px 10px 0;
+  }
+  .el-tree {
+    height: calc(100% - 70px);
+  }
+}
+</style>