feat: 完成节点点击事件，调整组件z-index保证层次正确

src/components/Menu.vue

@@ -63,6 +63,7 @@ export default {
   flex-direction: row;
   align-items: center;
   justify-content: start;
+  z-index: 100;
 }
 .menu-logo{
   color: #FFFFFF;

src/components/RightForm.vue

@@ -37,6 +37,7 @@ export default {
   width: 800px;
   box-shadow: 0 0 5px #BDC3C7;
   background: #FFFFFF;
+  z-index: 101;
 }
 .translation-enter-active,.translation-leave-active {
   transition: all 0.3s ease-out;

src/components/SideBar.vue

@@ -62,6 +62,7 @@ export default {
   justify-content: start;
   align-items: center;
   padding-top: 20px;
+  z-index: 100;
 }
 .icon{
   width: 28px;

src/components/Tree.vue

@@ -8,6 +8,7 @@
       :ref="`treenode-${requirement.id}`"
       @addChild="addChild"
       @deleteNode="deleteNode"
+      @nodeClick="nodeClick"
     />
   </div>
   <canvas id="line-drawer" :height="HEIGHT" :width="WIDTH"></canvas>
@@ -168,6 +169,9 @@ export default {
         id,
       });
     },
+    nodeClick(id) {
+      this.$emit('node-click', id);
+    },
   },
 };
 </script>
@@ -179,7 +183,7 @@ export default {
 }
 #node-container {
   position:absolute;
-  z-index: 101;
+  z-index: 11;
 }
 #line-drawer {
   position: absolute;

src/components/TreeNode.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tree-node-container" ref="node">
-    <div class="tree-node" @click="openDrawer(id)">
+    <div class="tree-node" @click="nodeClick(id)">
       <div class="node-state">{{state}}</div>
       <div class="node-title">{{title}}</div>
     </div>
@@ -42,8 +42,8 @@ export default {
     deleteNode(id) {
       this.$emit('delete-node', id);
     },
-    openDrawer(id) {
-      // TODO: 打开详细信息抽屉
+    nodeClick(id) {
+      this.$emit('node-click', id);
     },
   },
 };

src/views/Project/Schedule.vue

@@ -1,15 +1,17 @@
 <template>
-  <Tree :data="requirements" @change="handleTreeChange" ref="tree"></Tree>
+  <Tree :data="requirements" @change="handleTreeChange" @nodeClick="handleNodeClick" ref="tree"></Tree>
+  <RightForm ref="rightForm"/>
 </template>
 
 <script>
 import Tree from '@/components/Tree.vue';
+import RightForm from '@/components/RightForm.vue';
 
 import RequirementAPI from '@/api';
 
 export default {
   name: 'Schedule',
-  components: { Tree },
+  components: { Tree, RightForm },
   data() {
     return {
       requirements: [
@@ -60,6 +62,9 @@ export default {
       // this.requirements = await RequirementAPI.getTreeNode(projectId);
       this.$refs.tree.regenerateTree();
     },
+    handleNodeClick(id) {
+      this.$refs.rightForm.showForm();
+    },
   },
 };
 </script>