diff --git a/atune/web/src/views/Home.vue b/atune/web/src/views/Home.vue
index 14ea085971f182f7405eea2f02567438d6ac13dd..638e0275d550ce4e2df2b9b3230cb23f98ab1c73 100644
--- a/atune/web/src/views/Home.vue
+++ b/atune/web/src/views/Home.vue
@@ -5,12 +5,7 @@
   <div class="container">
     <div class="tree-container">
       <div class="title">可调优对象</div>
-      <el-tree
-        :data="atuneTree"
-        :props="defaultProps"
-        :highlight-current="true"
-        @node-click="handleNodeClick"
-      ></el-tree>
+      <el-tree :data="atuneTree" :props="defaultProps" :highlight-current="true" @node-click="handleNodeClick"></el-tree>
     </div>
     <div class="table-container">
       <div class="title">调优模板</div>
@@ -18,17 +13,24 @@
         <atuneList></atuneList>
       </div>
     </div>
+    <div>
+      <el-dialog title="调优信息" width="50%" @close="closeDialog" v-model="showDialog">
+        <atuneTemplete :selectedNodeData="selectedNodeData"></atuneTemplete>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { getAtuneAllName } from '@/api/atune';
-import { ElTree } from 'element-plus';
+import { ElTree, ElDialog } from 'element-plus';
 import atuneList from '@/components/atuneList.vue'
+import atuneTemplete from '@/components/atuneTemplete.vue'
 
 const atuneTree = ref([]);
-const selectedNodeData = ref(""); 
+const selectedNodeData = ref("");
+const showDialog = ref(false);
 const defaultProps = ref({
   label: 'label',
 });
@@ -41,8 +43,15 @@ onMounted(async () => {
   }));
 });
 
-function handleNodeClick(node:any) {
+function handleNodeClick(node: any) {
   selectedNodeData.value = node.label;
+  // 点击节点时显示dialog弹框
+  showDialog.value = true;
+}
+
+// 关闭dialog弹框
+function closeDialog() {
+  showDialog.value = false;
 }
 </script>
 
@@ -68,33 +77,37 @@ function handleNodeClick(node:any) {
   min-width: 100%;
   height: 95%;
 }
-.tree-container,.table-container {
-  border-radius: 10px; 
-  overflow: hidden; 
-  margin: 10px; 
-  background-color: #fff; 
+
+.tree-container,
+.table-container {
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 10px;
+  background-color: #fff;
 }
 
 .tree-container {
   height: 95%;
   width: 20%;
-  border: 1px solid #ddd; 
+  border: 1px solid #ddd;
   margin-left: 30px;
 }
 
 .table-container {
   height: 95%;
   width: 76%;
-  border: 2px solid #ddd; 
+  border: 2px solid #ddd;
   display: flex;
-  flex-direction: column; 
+  flex-direction: column;
 }
-.table{
+
+.table {
   flex: 1;
   padding: 10px;
 }
+
 .title {
-  height: 30px; 
+  height: 30px;
   background-color: #395a9c;
   color: #fff;
   padding: 10px;
@@ -102,5 +115,4 @@ function handleNodeClick(node:any) {
   border-top-right-radius: 10px;
   text-indent: 15px;
 }
-
 </style>